基于当前部分ID的JQuery显示下拉菜单
基于当前部分ID的JQuery显示下拉菜单
提问于 2018-08-12 19:21:20
我在一个一页的结构中有不同的部分，导航栏通过每个类别的下拉列表进行分类。我想要显示当前部分所属类别的下拉菜单。
if($("#About").hasClass('active')){
$(".tab-menu-content").css("display","block");
}我试着用这种方式实现它，但它不起作用，有什么想法吗？谢谢
编辑:我真的很抱歉，但我不能在这里发布代码，我将尝试更详细地解释它。 As you can see I has a nav menu with drop-down menus on hover.
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-12 21:07:45
是你所问问题的现场演示。我试着让JS尽可能简单。通过使用only if函数，我检测到子类别是否未激活，然后激活它，也可以通过单击自身或其他类别将它们向上滑动。
编辑：我更新了代码，因为你想要在滚动时显示部分的子类别，但这看起来可能有点混乱。查看并询问您在代码方面是否遇到问题。
HTML
<nav>
<ul>
<li class="category">Category 1
<div class="subcategory">
<ul>
<li class="width-li">Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
<li>Sub 5</li>
</ul>
</div>
</li>
<li class="category">Category 2
<div class="subcategory">
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li class="category">Category 3
<div class="subcategory">
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li class="category">Category 4
<div class="subcategory">
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
</ul>
</nav>
<div class="containers" id="red"></div>
<div class="containers" id="blue"></div>
<div class="containers" id="green"></div>
<div class="containers" id="yellow"></div>CSS
body{
background:white;
margin:0;
}
nav{
width:100%;
height:40px;
background:#E67B73;
position:fixed;
top:0;
left:0;
}
ul{
margin:0;
padding:0;
list-style:none;
}
.category{
display:block;
width:25%;
height:100%;
float:left;
line-height:40px;
text-align:center;
color:white;
font-weight:bolder;
transition:background 0.5s;
cursor:pointer;
position:relative;
}
.category:hover{
background:#E65273;
}
.active-category{
background:#E65273;
}
.subcategory{
position:fixed;
width:100%;
height:40px;
background:#EEAAA3;
display:none;
top:40px;
left:0;
}
.subcategory li{
width:20%;
display:inline-block;
float:left;
}
.subcategory li:hover{
background:#FFAAA3;
}
.containers{
width:100%;
height:calc(100vh - 40px);
}
#red{
background:red;
margin-top:40px;
}
#blue{
background:blue;
}
#green{
background:green;
}
#yellow{
background:yellow;
}JS
$('.category').click(function(){
$('.active').slideToggle(50);
$('.active').removeClass('active');
$('.active-category').removeClass('active-category');
if($(this).children('.subcategory').hasClass('self') == false){
$('.self').removeClass('self');
$(this).children('.subcategory').slideToggle(500).addClass('active self');
$(this).addClass('active-category');
} else {
$('.self').removeClass('self');
}
});
$(document).scroll(function(){
var scrolled = $(document).scrollTop();
var contheight = $('.containers').height();
switch(true){
case (scrolled<contheight):
selection(0);
break;
case (scrolled<contheight*2):
selection(1);
break;
case (scrolled<contheight*3):
selection(2);
break;
case (scrolled<contheight*4):
selection(3);
break;
}
});
function selection(e){
if($('.category').eq(e).hasClass('active-category') == false){
$('.active').slideToggle(50);
$('.active').removeClass('active');
$('.active-category').removeClass('active-category');
$('.category').eq(e).addClass('active-category');
if($('.category').eq(e).children('.subcategory').hasClass('self') == false){
$('.self').removeClass('self');
$('.category').eq(e).children('.subcategory').slideToggle().addClass('active self');
} else {
$('.self').removeClass('self');
}
console.log(e);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51808307
复制相关文章
相似问题
腾讯云开发者
