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

nextUntil以下のようにjQueryメソッドを使用できます。

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

一つの考えは、1つの内部に別の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のでは、あなたは、DOM内の兄弟のdivを選択するように.siblings()セレクタを使用することができます。選択肢にtoggleClass("heading")を実行してください。これを正しく理解していれば、そのトリックを行うはずです。