如何基于当前节ID的jquery显示下拉菜单?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (65)

我有一个单页结构的不同部分,导航栏被分类为每一个类别的下拉列表。我想显示当前部分所属类别的下拉菜单。

if($("#About").hasClass('active')){
    $(".tab-menu-content").css("display","block");
}

我试图以这种方式实现它,但它不起作用。

我很抱歉,但我不能在这里发布代码,我将尝试更详细地解释它。

我有一个带有下拉菜单的导航菜单:https://i.stack.imgur.com/KW5Mw.png

我想在没有悬停的情况下到达它的部分时自动显示下拉菜单内容。可以这样做吗?

https://i.stack.imgur.com/VFFLz.png

提问于
用户回答回答于

这(https://cr8code.co/editor.php?workid=bdf87fac1d4a019a715108ad5f95eff3是演示的问题。我试图让JS尽可能简单。仅通过使用我检测子类别是否处于活动状态的函数然后激活它,也可以通过单击自身或其他类别将其滑动。

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);
  }
}

扫码关注云+社区

领取腾讯云代金券