js 目录树

<!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();