css+js实现下拉菜单栏

最新推荐文章于 2024-06-24 14:10:26 发布

yuan487639

最新推荐文章于 2024-06-24 14:10:26 发布

阅读量2k

点赞数

分类专栏：前端插件文章标签：折叠菜单栏

本文链接：https://blog.csdn.net/yuan487639/article/details/76084861

版权

前端插件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

直接上代码吧，没什么复杂逻辑

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
    <style type="text/css">
        .out {  
}   
.out + ul {  
    display: block;  
}  

.in {  
}  

.in + ul {  
    display: none;  
}  
</style>

<body>
<ul>  
<li>蔬菜</li>  
<li  class="has_son">水果</li> 
<ul>  
<li>二级菜单</li>  
<li>二级菜单</li>  
<li>二级菜单</li>  
</ul>  

</ul> 
</body>
<script type="text/javascript">
    window.onload = function () {
        var objects = document.getElementsByClassName("has_son");
        for (var i = 0; i < objects.length; i++) {
            var element = objects[i];
//遍历对象，绑定点击事件方法
            element.onclick = function () {
                var temp = this.className;
//替换out、in对象
                if (temp.indexOf("out") != -1) {
                    this.className = temp.replace(/out/, "in");
                } else if (temp.indexOf("in") != -1) {
                    this.className = temp.replace(/in/, "out");
                } else {
                    this.className = "out";
                }
            }
        }
    }
</script>
</html>