文章/答案/技术大牛

发布

社区首页 >问答首页 >如何只切换标题元素而不是列表

问如何只切换标题元素而不是列表
EN

Stack Overflow用户

提问于 2016-03-21 13:29:24

回答 5查看 50关注 0票数 3

我有一个函数，它扩展<ul>，在pressed.But之后隐藏它，当我按下<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>

提前谢谢。

javascript

jquery

html

回答 5

Stack Overflow用户

回答已采纳

发布于 2016-03-21 13:33:07

更改使

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

票数 0

Stack Overflow用户

发布于 2016-03-21 13:33:13

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

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

看到它在JS Fiddle：https://jsfiddle.net/rwvdf8ys/1/中工作

希望这能有所帮助。

票数 0

Stack Overflow用户

发布于 2016-03-21 13:33:38

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36132368

复制

相似问题

问如何只切换标题元素而不是列表
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何只切换标题元素而不是列表EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何只切换标题元素而不是列表
EN