js 目录树

最新推荐文章于 2022-11-03 10:30:44 发布

weixin_30410119

最新推荐文章于 2022-11-03 10:30:44 发布

阅读量89

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/enych/p/8509274.html

版权

<!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>

转载于:https://www.cnblogs.com/enych/p/8509274.html

weixin_30410119

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 目录树

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script src="jquery.min.js"></script><style>ul{ list-sty...
复制链接

扫一扫