javascript - jQuery，切换菜单项

Question

我有以下导航菜单。 如果我单击 h1、t1、t2、t3 需要切换(隐藏或显示)，其他内容保持原样。

如果我点击 h3、t6、t7、t8 需要切换，其他内容保留。

基本上，h1、h2、h3 是标题，其余的是子项。

$(document).ready(function() {
  /* In mobile menu, heading click, toggle sub */
  $('.slicknav_nav li.heading').click(function() {
    //$(this).find('ul').slideToggle();
    $('.slicknav_nav li:not(.heading)').toggle();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="heading">h1</li>
  <li class="first">t1</li>
  <li class="">t2</li>
  <li class="">t3</li>

  <li class="heading">h2</li>
  <li class="first">t4</li>
  <li class="">t5</li>

  <li class="heading">h3</li>
  <li class="first">t6</li>
  <li class="">t7</li>
  <li class="">t8</li>
</ul>

我已经编写了一些代码。显然，它也会切换其他对等点。这是一种仅切换当前项目的“子项”的方法吗？

Answer 1

您可以使用 jQuery 方法的 nextUntil ，如下所示。

$(this).nextUntil(".heading").toggle();

示例:

$(document).ready(function() {
  /* In mobile menu, heading click, toggle sub */
  $('.slicknav_nav li.heading').click(function() {
    $(this).nextUntil(".heading").toggle();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slicknav_nav">
  <li class="heading">h1</li>
  <li class="first">t1</li>
  <li class="">t2</li>
  <li class="">t3</li>

  <li class="heading">h2</li>
  <li class="first">t4</li>
  <li class="">t5</li>

  <li class="heading">h3</li>
  <li class="first">t6</li>
  <li class="">t7</li>
  <li class="">t8</li>
</ul>