javascript-切换列表,单击项目将显示所有子项目,而不是项目中的仅子项目

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-切换列表,单击项目将显示所有子项目,而不是项目中的仅子项目，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1045字，纯文字阅读大概需要2分钟。

内容图文

抱歉,标题含糊,但我找不到合适的标题,很好地说明了问题.

问题：我写了一个代码来切换列表.它以我想要的方式工作.当我单击“标题类别”时,它会打开子类别,等等.当我第一次单击标题类别时,会出现问题,它会打开每个列表,这不是我想要的.当我关闭并再次打开它时,它会按应有的方式工作.我试图弄清楚为什么这样做,但是我不知道.因此,如果有人可以帮助我,将非常感谢他/她.

jQuery代码.

$(document).ready(function()
{
$('ul.subcat').hide();

$('li').click(function(event)
{ 
    event.stopPropagation();
    $('ul', this).toggle(); 

});
});

HTML代码

<ul class="headcat">
  <li>item 1
  <ul class="subcat">
    <li>subitem 1
    <ul class="subcat">
      <li>subsubitem 1
      <ul class="subcat">
        <li><p>text</p></li>
      </ul>
      </li>
      <li>subsubitem 2
      <ul class="subcat">
        <li><p>text</p></li>
        <li>subsubsubitem 1
        <ul class="subcat">
          <li><p>text</p></li>
        </ul>
        </li>
        <li>subsubsubitem 2</li>
      </ul>
      </li>
    </ul>
    </li>
    <li>item 2</li>
  </ul>
  </li>
</ul>  

解决方法:

您只需要选择当前单击的li的直接后代,请尝试以下操作：

$(this).children("ul").toggle();

以下内容也可以使用,但是使用>并不是最佳实践.后代选择器,前面没有主元素.

$('> ul', this).toggle(); 

Example fiddle

内容总结

以上是互联网集市为您收集整理的javascript-切换列表,单击项目将显示所有子项目,而不是项目中的仅子项目全部内容，希望文章能够帮你解决javascript-切换列表,单击项目将显示所有子项目,而不是项目中的仅子项目所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端