如何訪問 HTML 子列表

Question

所以我有這個結構（這是一個例子），第一個列表是列出客戶端，第二個是顯示/隱藏每個客戶端的文檔：

<ul class="first_ul">
     <li class="first_li">
          <span>ClientName</span>
          <ul class="sub_ul">
                <li class="sub_li">
                    <input type="checkbox"/>
                    <span>Document 1</span>
                    <i class="icon-circle" style="color:#11C011"></i>
                </li>
          </ul>
     </li>
</ul>

其次是一個 jquery onclick 隱藏/顯示該子列表。

     $(".first_ul li").on("click", function(){   
         var child = $(this).children('.sub_ul');
         child.slideToggle(); //toggle current one
     });

我的問題是我無法訪問該子列表，因為每次我嘗試單擊該復選框時，該子列表都會隱藏，當我按 F12 以查看會發生什么時，我只能從第一個列表中選擇 li。

有什么辦法可以解決這個問題，例如說子列表比第一個列表更重要，出現或者我不知道。 謝謝！

Answer 1

您需要在父 li 的單擊處理程序中使用e.stopPropagation ，如下所示，這將停止從子元素到父元素的單擊事件傳播，這會導致觸發父 li 元素的單擊事件，即 first_li。 此外，添加 if 條件來檢查單擊的元素是 li 或其子元素。

此外，使用find()獲取類sub_ul所有子元素

 $(document).ready(function(){ $(".first_ul li").on("click", function(e){ e.stopPropagation(); // return if parent not clicked if (e.target !== this) return; var child = $(this).find('.sub_ul'); child.slideToggle(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <ul class="first_ul"> <li class="first_li"> <ul class="sub_ul"> <li class="sub_li"> <input type="checkbox"/> <span>Sub Menu 1</span> <i class="icon-circle" style="color:#11C011"></i> </li> </ul> </li> <li class="first_li"> <ul class="sub_ul"> <li class="sub_li"> <input type="checkbox"/> <span>Sub Menu 2</span> <i class="icon-circle" style="color:#11C011"></i> </li> </ul> </li> <li class="first_li"> <ul class="sub_ul"> <li class="sub_li"> <input type="checkbox"/> <span>Sub Menu 3</span> <i class="icon-circle" style="color:#11C011"></i> </li> </ul> </li> </ul>

Answer 2

在.sub_ul上使用e.stopPropagation()或您想停止click事件下的內容！

 $(".first_ul li").on("click", function() { var child = $(this).children('.sub_ul'); child.slideToggle(); }); $('.sub_ul').click(function(e) { e.stopPropagation(); });

 .first_li { background: lightgray; } .sub_ul { background: gray }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="first_ul"> <li class="first_li"> <span>ClientName</span> <ul class="sub_ul"> <li class="sub_li"> <input type="checkbox" /> <span>Document 1</span> <i class="icon-circle" style="color:#11C011"></i> </li> </ul> </li> </ul>