Question

我正在尝试切换所选对象的孩子的班级＆＃34; ul＆＃34;对象，使用以下代码。当我点击其中一个父母，多个孩子＆＃34; ul＆＃34;类可以打开和关闭类，而不仅仅是所选对象的子类。这是代码和jsfiddle示例。任何帮助将不胜感激。

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

由于您有多个具有类string[] formats = new string[] { "dd/MM/yyyy hh:mm:ss tt", "MMMM dd, yyyy - dddd" }; CultureInfo ci = new CultureInfo("ru"); DateTime strTime = DateTime.ParseExact(date, formats, ci, DateTimeStyles.None);的嵌套元素，因此当您单击内部项目时，您在此处看到的内容称为bubbling，它会触发该函数，之后再次为上部容器启用该函数同一个班级。

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

.proDocs

New Demo

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

Answer 2

感谢您的提问

看下面的解决方案希望这对你有所帮助

更改你的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>

然后使用您的javascript代码更改以下代码

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

祝你有所帮助

随意问我任何问题。

切换子对象的类

2 个答案:

New Demo