jQuery，切換菜單項

Question

我有以下導航菜單。 如果單擊h1，t1，t2，t3，則需要進行切換（隱藏或顯示），其他情況保持不變。

如果單擊h3，t6，t7，t8，則需要切換，其他情況保持不變。

基本上，h1，h2，h3是標頭，rest是子級。

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

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") ，如果我正確理解這一點，應該可以解決問題。