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

所做的更改

►将$.ajax({ url: '', beforeSend: function () { // Here your code it fired just before ajax request }, data: { }, success: function (data) { } })更改为$('.sub').click(function() {

►将$('.sub h4')更改为$(this).find('ul')

工作演示

$(this).next()

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

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是cals函数。在这种情况下，它是h4。 H4有没有，所以你找不到它。但你可以在$（'。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>

小提琴：

https://jsfiddle.net/8hvc4cfh/

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

5 个答案: