如何將切換功能添加到以下子項 <li> 在jQuery中

Question

當我嘗試將切換功能添加到子節點時，什么也沒發生，您能幫幫我嗎。

 $(document).ready(function() { $('label.tree-toggler').click(function() { $(this).parent().children('ul.tree').toggle(300); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav nav-list"> <li><label class="tree-toggler nav-header">WorkLoad</label> <ul class="nav nav-list tree"> <li><label class="tree1">DME Report</label> <ul class="tree1"> <li> <a href="search.php">Report1</a> <a href="search.php">Report2</a> </li> </ul> </li> <li><a href="update.php">CAMB Report</a></li> <li><a href="index2.php">LMAB Report</a></li> <li><a href="#">DMF Notification</a></li> <li><a href="#">LME Forecast Report</a></li> </ul> </li> </ul> 

Answer 1

這將使上面的代碼簡化為：

下面的代碼通常可以按預期工作，...

 $(document).ready(function() { $('label.tree-toggler, label.tree1').click(function() { $(this).parent().children('ul.tree , ul.tree1').toggle(300); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav nav-list"> <li><label class="tree-toggler nav-header">WorkLoad</label> <ul class="nav nav-list tree"> <li><label class="tree1">DME Report</label> <ul class="tree1"> <li> <a href="search.php">Report1</a> <a href="search.php">Report2</a> </li> </ul> </li> <li><a href="update.php">CAMB Report</a></li> <li><a href="index2.php">LMAB Report</a></li> <li><a href="#">DMF Notification</a></li> <li><a href="#">LME Forecast Report</a></li> </ul> </li> </ul> 

Answer 2

您可以使用:has選擇器，將click事件處理程序僅附加到具有子ul li元素上，以通用方式進行此工作。 然后，您可以在點擊處理程序中toggle()那些ul 。

還要注意，處理程序將需要在事件上調用stopPropagation() ，以阻止父li關閉其子ul元素。 嘗試這個：

 $(document).ready(function() { $('ul > li:has(ul)').click(function(e) { e.stopPropagation(); $(this).find('> ul').toggle(300); }); }); 

 ul > li > ul { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav nav-list"> <li> <label class="nav-header">WorkLoad</label> <ul class="nav nav-list tree"> <li> <label class="tree1">DME Report</label> <ul class="tree1"> <li> <a href="search.php">Report1</a> <a href="search.php">Report2</a> </li> </ul> </li> <li><a href="update.php">CAMB Report</a></li> <li><a href="index2.php">LMAB Report</a></li> <li><a href="#">DMF Notification</a></li> <li><a href="#">LME Forecast Report</a></li> </ul> </li> </ul>