我正在创建一个包含更多选项的菜单。
预期行为类似于 Pinterest 对其标签使用的行为。从他们的网站录制了一段视频,可以在下面找到。我试图模仿行为,而不是视觉。
到目前为止,这是设法做到的。每次我选择某些内容时,更多菜单下的链接都会消失。
var moreMenu = $(".cat-links a").slice(3);
$(".cat-links a").slice(3).remove();
$('.more-list').append(moreMenu);
$(".more-menu .more").click(function(){
$(".more-list").toggleClass("open");
});
$(".more-list a").click(function(){
var selectedLink = $(this).text();
$(this).remove();
$(".more-menu .more").text(selectedLink);
$(".more-list").toggleClass("open");
$(".cat-links a").removeClass("active");
$(".more-menu .more").addClass("active");
});
$(".cat-links a").click(function(){
$(".categories a").removeClass("active");
$(this).addClass("active");
});
* {
list-style: none;
outline: 0;
border: 0;
text-decoration: none;
margin: 0;
padding: 0;
}
body {
padding:20px;
}
.categories a{
color: #000;
font-weight: 500;
font-size: 16px;
opacity: 0.5;
}
.categories a:hover{
opacity: 0.7;
}
.categories a.active{
opacity: 1;
}
.categories a.more{
background: url('../img/down.svg') no-repeat right center;
padding-right: 14px;
}
.categories {
flex: 1;
display: inline-flex;
position: relative;
}
.categories a{
margin-right: 16px;
}
.more-menu {
position: relative;
}
.more-list {
position: absolute;
right: -80px;
background: #fff;
padding: 14px;
border-radius: 6px;
top: 30px;
width: 200px;
z-index: 999999;
box-shadow: 0px 32px 84px rgba(0, 0, 0, 0.08), 0px 1px 2px rgba(0, 0, 0, 0.06);
display:none;
}
.more-list.open {
display:block;
}
.more-list a {
display: block;
line-height: 32px;
}
.more-menu .un-more{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="categories">
<div class="cat-links">
<a href="#" class="active">Everything</a>
<a href="#">Homeware</a>
<a href="#">Electronics</a>
<a href="#">Outdoors</a>
<a href="#">Kids</a>
<a href="#">Men</a>
<a href="#">Women</a>
</div>
<div class="more-menu">
<a href="#" class="more">More</a>
<div class="more-list">
</div>
</div>
</div>
最佳答案
您不需要从更多列表中删除该元素。如果这样做,则需要重新添加。
var moreMenu = $(".cat-links a").slice(3);
$(".cat-links a").slice(3).remove();
$('.more-list').append(moreMenu);
$(".more-menu .more").click(function(){
$(".more-list").toggleClass("open");
});
$(".more-list a").click(function(){
var selectedLink = $(this).text();
$(".more-list a").show(); // show all items
$(this).hide(); // hide current item
$(".more-menu .more").text(selectedLink);
$(".more-list").toggleClass("open");
$(".cat-links a").removeClass("active");
$(".more-menu .more").addClass("active");
});
$(".cat-links a").click(function(){
$(".categories a").removeClass("active");
$(this).addClass("active");
if (!$(this).hasClass("more")) { // if one of the other links was clicked
$(".more-list a").show(); // show everything
$(".more-menu .more").text("More");
}
});
关于javascript - 带有更多菜单的 jQuery 动态选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59358306/