javascript – 切换子对象的类

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 切换子对象的类，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1588字，纯文字阅读大概需要3分钟。

内容图文

我正在尝试使用以下代码切换所选对象的子“ul”对象的类.当我单击其中一个父项时,多个子“ul”类会打开和关闭该类,而不仅仅是所选对象的子项.这是代码和jsfiddle示例.任何帮助将不胜感激.

jsFiddle example

CSS

.hidden {
    display:none;
}

jquery

$(document).ready(function () {
$(".proDocs").click(function() {
 $(this).children( "ul" ).toggleClass( "hidden" );
});
});

HTML

<div>
 <ol type="A">
 <li class="proDocs">
Procedures
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
 <ol type="a">
 <li class="proDocs">
Performance
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
 <ol type="I">
 <li class="proDocs">
Validation Documents
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
 <ol type="i">
 <li class="proDocs">
Evaluation
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
 </li>
 <li class="proDocs">
Reports
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
 </li>
 <li class="proDocs">
Certification
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
 </li>
 <li class="proDocs">
Training
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
 </li>
 </ol>
 </li>
 <li class="proDocs">
Other Documents
<ul class="hidden">
<li>Upload Pictures</li>
</ul>
 </li>
 </ol>
 </li>
 </ol>
 </li>
 </ol>
 </li>
 </ol>
 </div>

解决方法:

由于你有多个嵌套元素和.proDocs类,你在这里看到的是bubbling,当你单击一个内部项时,它会激活该函数,然后在上面容器的函数之后,因为它具有相同的类.

要防止出现这种情况,您可以使用stopPropagation(),现在是您的代码：

$(document).ready(function() {
  $(".proDocs").click(function(e) {
    e.stopPropagation();
    $(this).children("ul").toggleClass("hidden");
  });
});

New Demo

注意：您也可以使用return false或preventDefault()
 是你的选择,每个人都有自己的特点

内容总结

以上是互联网集市为您收集整理的javascript – 切换子对象的类全部内容，希望文章能够帮你解决javascript – 切换子对象的类所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端