伊人怎会持宠而骄
希望有人懂你的低头不语、小心翼翼守护你的孩子气
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<ul>
<li>一级菜单ITEM
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单ITEM
<ul>
<li>三级菜单</li>
<li>三级菜单</li>
<li>三级菜单</li>
<li>三级菜单
                            <ul>
                                <li>四级菜单</li>
                                <li>四级菜单</li>
                                <li>四级菜单</li>
                                <li>四级菜单</li>
                            </ul>
                        </li>
</ul>
</li>
</ul>
</li>
<li>一级菜单</li>
<li>一级菜单ITEM
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单ITEM
<ul>
<li>三级菜单</li>
<li>三级菜单</li>
<li>三级菜单</li>
<li>三级菜单</li>
</ul>
</li>
</ul>
</li>
<li>一级菜单</li>
</ul>
</body>
</html>
<script>
    var list = document.getElementsByTagName("li");//获取所有li
    //为每个li添加点击事件,判断是否有子元素
    for(var i = 0; i < list.length; i++){
        list[i].onclick = function(e){
            var e = e || event;
            e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
            //li如果有子元素
            if(this.children[0]){
                if(this.children[0].style.display == "none"){
                    this.children[0].style.display = "block";
                }else{
                    this.children[0].style.display = "none";
                }
            }
        }
    }
</script>
posted on 2019-01-28 09:24  伊人怎会持宠而骄  阅读(300)  评论(0编辑  收藏  举报