Javascript 切换子对象的类

我尝试使用以下代码切换选定对象的子对象“ul”的类。当我单击其中一个父对象时，多个子“ul”类将打开和关闭该类，而不仅仅是选定对象的子对象。下面是代码和一个JSFIDLE示例。任何帮助都将不胜感激

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当您单击一个内部项时，会调用这里看到的内容，它会触发函数，并且在函数之后会再次调用上层容器，因为它具有相同的类

要防止这种行为，您可以使用以下代码：

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

---

注意：您还可以使用return false或preventDefault（）

---

这是你的选择，每个都有自己的特点

谢谢你的提问

看看下面的soloution，希望它能帮助你

更改html和表单

<div>
   <ol type="A">
      <li class="proDocs">
         Procedures
         <ul class="hidden">
            <li>Upload Pictures</li>
            <ol type="a">
               <li class="proDocs">
                  Performance
                  <ul class="hidden">
                     <li>Upload Pictures</li>
                     <ol type="I">
                        <li class="proDocs">
                           Validation Documents
                           <ul class="hidden">
                              <li>Upload Pictures</li>
                              <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>
                           </ul>
                        </li>
                        <li class="proDocs">
                           Other Documents
                           <ul class="hidden">
                              <li>Upload Pictures</li>
                           </ul>
                        </li>
                     </ol>
                  </ul>
               </li>
            </ol>
         </ul>
      </li>
   </ol>
</div>

希望这对你有帮助

---

您可以随意问我任何问题。

您的HTML不正确。它包含了太多的关闭。此外，任何父项也是proDocs，这将由子项单击触发。是的，问题是Niels comment。proDocs类包含一个proDocs类，因此脚本将获取第一个和第二个proDocs，并尝试执行脚本所做的操作。如果正确缩进代码，则不会很容易遇到此类问题

$(document).ready(function () {
    $(".proDocs").click(function() {
        $(this).children( "ul:first-child" ).toggleClass( "hidden" );
      return false;
    });
});