blocks|key|2607101|text|是你所问问题的现场演示。我试着让JS尽可能简单。通过使用only+if函数，我检测到子类别是否未激活，然后激活它，也可以通过单击自身或其他类别将它们向上滑动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2607102|编辑：我更新了代码，因为你想要在滚动时显示部分的子类别，但这看起来可能有点混乱。查看并询问您在代码方面是否遇到问题。|offset|length|style|BOLD|2607103|HTML|2607104|+<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>|code-block|syntax|javascript|2607105|CSS|2607106|body{
++background:white;
++margin:0;
}
nav{
++width:100%25;
++height:40px;
++background:#E67B73;
++position:fixed;
++top:0;
++left:0;
}
ul{
++margin:0;
++padding:0;
++list-style:none;
}
.category{
++display:block;
++width:25%25;
++height:100%25;
++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%25;
++height:40px;
++background:#EEAAA3;
++display:none;
++top:40px;
++left:0;
}
.subcategory+li{
++width:20%25;
++display:inline-block;
++float:left;
}
.subcategory+li:hover{
++background:#FFAAA3;
}
.containers{
++width:100%25;
++height:calc(100vh+-+40px);
}
#red{
++background:red;
++margin-top:40px;
}
#blue{
++background:blue;
}
#green{
++background:green;
}
#yellow{
++background:yellow;
}|2607107|JS|2607108|$('.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);
++}
}|2607109|entityMap^0|0|0|3|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p><strong><a href="https://cr8code.co/editor.php?workid=bdf87fac1d4a019a715108ad5f95eff3" rel="nofollow noreferrer">Here</a></strong> is he live demo of what you are asking. I tried to keep JS as simple as possible. By using only if functions i detect if the sub category is not active then active it, also by clicking itself or other categories it slides them up.</p>

<p><strong>EDIT:</strong> I updated the code as you want to display the sections subcategories as you scroll but it may seem a little confusing. Check out and ask if you have trouble with code.</p>

<p>HTML</p>

<pre><code> &lt;nav&gt;
  &lt;ul&gt;
    &lt;li class="category"&gt;Category 1
      &lt;div class="subcategory"&gt;
        &lt;ul&gt;
          &lt;li class="width-li"&gt;Sub 1&lt;/li&gt;
          &lt;li&gt;Sub 2&lt;/li&gt;
          &lt;li&gt;Sub 3&lt;/li&gt;
          &lt;li&gt;Sub 4&lt;/li&gt;
          &lt;li&gt;Sub 5&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="category"&gt;Category 2
      &lt;div class="subcategory"&gt;
        &lt;ul&gt;
          &lt;li&gt;Sub 1&lt;/li&gt;
          &lt;li&gt;Sub 2&lt;/li&gt;
          &lt;li&gt;Sub 3&lt;/li&gt;
          &lt;li&gt;Sub 4&lt;/li&gt;

        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="category"&gt;Category 3
      &lt;div class="subcategory"&gt;
        &lt;ul&gt;
          &lt;li&gt;Sub 1&lt;/li&gt;
          &lt;li&gt;Sub 2&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="category"&gt;Category 4
      &lt;div class="subcategory"&gt;
        &lt;ul&gt;
          &lt;li&gt;Sub 1&lt;/li&gt;
          &lt;li&gt;Sub 2&lt;/li&gt;
          &lt;li&gt;Sub 3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;
&lt;div class="containers" id="red"&gt;&lt;/div&gt;
&lt;div class="containers" id="blue"&gt;&lt;/div&gt;
&lt;div class="containers" id="green"&gt;&lt;/div&gt;
&lt;div class="containers" id="yellow"&gt;&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>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;
}
</code></pre>

<p>JS</p>

<pre><code>$('.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&lt;contheight):
      selection(0);
      break;
    case (scrolled&lt;contheight*2):
      selection(1);
      break;
    case (scrolled&lt;contheight*3):
      selection(2);
      break;
    case (scrolled&lt;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);
  }
}
</code></pre>


<p>I have different sections in a one-page structure and the nav-bar is categorized with drop-down lists for each category.
I want to show the drop-down menu of the category the current section belongs to.</p>

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

<p>I tried to implement it this way but it's not working, any ideas?
Thank you</p>

<p>Edit:
I am really sorry but I can't post the code here, I will try to explain it in more details.<a href="https://i.stack.imgur.com/KW5Mw.png" rel="nofollow noreferrer"> As you can see I has a nav menu with drop-down menus on hover.</a></p>

<p><a href="https://i.stack.imgur.com/VFFLz.png" rel="nofollow noreferrer">I want to show the drop menu contents automatically when I reach it's sections without hovering. Can this be done?</a></p>


JQuery show drop-down menu based on current section ID

我在一个一页的结构中有不同的部分，导航栏通过每个类别的下拉列表进行分类。我想要显示当前部分所属类别的下拉菜单。if($("#About").hasClass('active')){    $(".tab-menu-content").css("display","block");}我试着用这种方式实现它，但它不起作用，...

问基于当前部分ID的JQuery显示下拉菜单
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于当前部分ID的JQuery显示下拉菜单EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于当前部分ID的JQuery显示下拉菜单
EN