<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="jquery.min.js"></script> <style> ul{ list-style:none; } </style> </head> <body> <ul> <li><span>客户类型</span> <ul> <li><span>企业单位</span> <ul> <li>AAA公司</li> <li>BBB公司</li> </ul> </li> <li><span>事业单位</span> <ul> <li>AAA1公司</li> <li>BBB2公司</li> </ul> </li> <li><span>其他</span></li> </ul> </li> </ul> <script> $(document).ready(function (e) { $("ul span").click(function (e) { $(this).parent().children("ul").toggle(); // 当前对象下查找ul元素对象调用toggle方法来 切换显示/隐藏 var div = $(this).children("div :first"); //查找当前对象下的第一个div对象 var html = div.html(); //返回div元素的内容。 if (html == '<span class="icon-folder-open"></span>') { //判断div元素的内容 来切换图标 div.html('<span class="icon-folder"></span>'); } if (html == '<span class="icon-folder"></span>') { div.html('<span class="icon-folder-open"></span>'); } e.stopPropagation(); //阻止冒泡事件*/ 因为li下有ul ， 当对li单击单击事件就会触发li事件，当对li下的ul单击时也会触发li事件（li区域包括ul）；该函数是子元素不触发前辈元素的事件 }); }); </script> </body> </html>
阻止事件冒泡
e.cancelBubble = true;
e.stopPropagation();