如何将切换功能添加到以下子项 <li> 在jQuery中

Question

when i am trying to add toggle function to the child nodes nothing is happening could you help me out.

 $(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

This would allow to simplify the above code to:

The code below mostly works as intended, ...

 $(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

You can make this work in a generic way by attaching the click event handler only to li elements which have child ul using the :has selector. Then you can toggle() those ul within the click handler.

Also note the handler will need to call stopPropagation() on the event to stop the parent li from closing their child ul elements too. Try this:

 $(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>