Question

我在一页结构中有不同的部分，并且导航栏按每个类别的下拉列表进行分类。我想显示当前部分所属类别的下拉菜单。

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.

I want to show the drop menu contents automatically when I reach it's sections without hovering. Can this be done?

Answer 1

Here 是他实时演示您的要求。我试图使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);
  }
}

基于当前栏目ID的jQuery show下拉菜单

1 个答案: