リストではなくヘッダ要素だけを切り替える方法

Question

<ul>を展開して、それを隠した後に非表示にするこの機能があります。しかし、<li>を押すと、閉じるか展開されます。 <h4>がクリックされた場合にのみ、どのように切り替えるのですか？事前に

$('.category ul').hide(); 

$('.sub').click(function() { 
    $(this).find('ul').slideToggle(); 
}); 

<ul class="category text-center"> 
    <li class="sub"> 
     <h4><b>Licenses</b></h4> 
     <ul class="archive_posts"> 
      <li class="posts"><a href="www.google.com" target="_blank">Licence types and users plans</a></li> 
      <li class="posts"><a href="#">Adding new licence</a></li> 
      <li class="posts"><a href="#">Updating licence</a></li> 
      <li class="posts"><a href="#">Removing licence</a></li> 
     </ul> 
    </li> 
</ul> 

感謝。

Answer 1

変更が

。►►は$(this).next()

ワーキングデモ

$('.category ul.archive_posts').hide(); 
 

 
$('.sub h4').click(function() { 
 
    $(this).next().slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="category text-center"> 
 
    <li class="sub"> 
 
    <h4><b>Licenses</b></h4> 
 
    <ul class="archive_posts"> 
 
     <li class="posts"><a href="www.google.com" target="_blank">Licence types and users plans</a> 
 
     </li> 
 
     <li class="posts"><a href="#">Adding new licence</a> 
 
     </li> 
 
     <li class="posts"><a href="#">Updating licence</a> 
 
     </li> 
 
     <li class="posts"><a href="#">Removing licence</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

へ $(this).find('ul')を変更 $('.sub h4')

に$('.sub').click(function() {を変更をしました

Answer 2

バインディングをh4に変更し、次のul.archive_postsをスライド対象にします。

$('.category ul').hide(); 
$('h4').click(function() { 
    $(this).next('ul.archive_posts').slideToggle(); 
}); 

それはこの中で作業を参照してくださいフィドルをJS：助けhttps://jsfiddle.net/rwvdf8ys/1/

希望。

Answer 3

siblings('ul')セレクタを使用して近隣ulを検索して閉じることができます。 $(".sub h4")はクリック可能な要素をh4に制限します。

$('.category ul').hide(); 
 
$('.sub h4').click(function() { 
 
    console.log('test'); 
 
    $(this).siblings('ul').slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="category text-center"> 
 
    <li class="sub"> 
 
    <h4><b>Licenses</b></h4> 
 
    <ul class="archive_posts"> 
 
     <li class="posts"><a href="www.google.com" target="_blank">Licence types and users plans</a> 
 
     </li> 
 
     <li class="posts"><a href="#">Adding new licence</a> 
 
     </li> 
 
     <li class="posts"><a href="#">Updating licence</a> 
 
     </li> 
 
     <li class="posts"><a href="#">Removing licence</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 4

あなたはこれを試すことができます。

$('li.sub h4').click(function() { 
$(this).next().slideToggle(); 
}); 

Answer 5

問題は$（ 'this'）です。find（ 'ul'）。slideToggle（）;

'this'は関数を呼び出すobjを表します。この場合はh4です。 H4にはnoe ulがあるので、それを見つけることはできません。しかし、あなたは（ 'サブ'）$上のUL見つけることができます。ここ

は、アンの一例である

$('.category ul').hide(); 

$('h4').click(function() { 
    $('.sub').find('ul').slideToggle(); 
}); 


      <ul class="category text-center"> 
       <li class="sub"> 
        <h4 id="foo"><b>Licenses</b></h4> 
        <ul class="archive_posts"> 
         <li class="posts"><a href="www.google.com" target="_blank">Licence types and users plans</a></li> 
         <li class="posts"><a href="#">Adding new licence</a></li> 
         <li class="posts"><a href="#">Updating licence</a></li> 
         <li class="posts"><a href="#">Removing licence</a></li> 
        </ul> 
       </li> 
      </ul> 

JSフィドル：

https://jsfiddle.net/8hvc4cfh/