javascript - 如何仅切换标题元素而不是列表

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

所做的更改

► 将 $('.sub').click(function() { 更改为 $('.sub h4')

► 将 $(this).find('ul') 更改为 $(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>