javascript - 切换子对象的类

Question

我正在尝试使用以下代码切换所选对象的子“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>

Answer 1

由于类 .proDocs 中有多个嵌套元素，因此您在此处看到的称为 bubbling当您单击内部元素时，它会触发该函数，并在该函数之后再次触发上层容器，因为它们具有相同的类。

要防止这种行为，您可以使用 stopPropagation() ，现在你的代码:

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

New Demo

---

_{注意:您还可以使用return false 或preventDefault() 是你的选择，每个人都有自己的特点}