Question

我有以下导航菜单。如果我点击h1，t1，t2，t3需要切换（隐藏或显示），其他东西保持不变。

如果我点击h3，t6，t7，t8需要切换，其他的东西都会停留。

基本上，h1，h2，h3是标题，其余是儿童。

＆＃13;

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

＆＃13;

<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>

＆＃13;

我已经制作了一些代码。显然，它也会切换其他同行。这是一种只切换当前项目＆＃34;孩子＆＃34;？

的方法

Answer 1

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

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

示例：

＆＃13;
＆＃13;
$(document).ready(function() { /* In mobile menu, heading click, toggle sub */ $('.slicknav_nav li.heading').click(function() { $(this).nextUntil(".heading").toggle(); }); });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

一种想法是将每个标题组包装在一个div中，然后将子项包装在另一个div中。可以为布局做这样的事情：

<ul>
  <div class="headingContainer">
    <li class="heading">h1</li>
    <div class="childContainer">
      <li class="first">t1</li>
      <li class="">t2</li>
      <li class="">t3</li>
    </div>
  </div>

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

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

然后，在您的jQuery中，您可以使用.siblings()选择器来选择dom中的兄弟div。在选择上运行toggleClass("heading")，如果我正确理解这一点，那应该可以解决问题。

jQuery，切换菜单项

2 个答案: