<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <style> ul { display: block; margin-left: 20px; padding: 0px; list-style: none; width:200px; background-color:cadetblue; overflow:hidden; } li { display: block; margin: 0; padding: 0; list-style: none; width:200px; background-color:aqua; } </style> </head> <body style="background: rgb(240, 249, 253);"> <script type="text/javascript"> $(document).ready(function () { $("li").click(function (e) { var $target = $(this); //console.log($target.html()); if ($target.next("ul").is(":hidden")) { $("ul").not("#root").hide(); $target.next("ul").show(); $target.addClass("active"); $target.siblings().removeClass("active"); } else { $target.next("ul").hide(); } }); }); </script> <ul id="root"> <li>1</li> <ul> <li>11</li> <li>12</li> <li>13</li> </ul> <li>2</li> <ul> <li>21</li> <li>22</li> <li>23</li> </ul> <li>3</li> <ul> <li>31</li> <li>32</li> <li>33</li> </ul> </ul> </body> </html>