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

How to toggle only header element not the list

本文关键字：列表 元素 何仅切 标题      更新时间：2023-09-26

我有这个函数，可以展开<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>

提前谢谢。

所做的

更改

► 将$('.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>

将绑定更改为h4，然后定位下一个ul.archive_posts进行滑动。

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

看到它在这个JS小提琴中工作：https://jsfiddle.net/rwvdf8ys/1/

希望有帮助。

问题是 $（'this'）.find（'ul'）.slideToggle（）;

"this"表示校准函数的 OBJ。在本例中为 h4。H4 没有 ul，所以你找不到它。但是你可以在$（'.sub'）上找到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/

您可以使用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>

你可以

试试这个。

$('li.sub h4').click(function() {
$(this).next().slideToggle();
});
相关文章：