CSS+JS写折叠下拉菜单

看到别人通过id和增加的属性来对应父子关系，觉得麻烦，想着能不能定义一个类来实现。最终的代码类似这样

<ul>
<li>一级菜单</li>
<li>一级菜单存在子菜单<li>
<li class="hasSon">
<ul>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>

实现的功能是点击存在子菜单的一级菜单，能够打开或关闭该子菜单下的二级菜单。

之前想通过纯CSS来实现，找了很久发现CSS无法监听onclick动作，最终放弃，结合js来做。其实用JQuery来实现更简单，不过为了更加通用，还是决定用原生js来实现。

这里定义了一对样式，分别是in和out，表示关闭和打开折叠菜单。利用css选择器，选择紧连着li的ul标签，设置display属性。这样js部分，只需要替换class的样式就可以了。

.out {
}

.out + ul {
    display: block;
}

.in {
}

.in + ul {
    display: none;
}

js代码如下，用到的知识点比较多，获取对象的方法，替换字符串的方法，遍历对象组的方法等。

//获取所有拥有子菜单的对象
var objects = document.getElementsByClassName("hasSon");
        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";
                }
            }
        }

CSS+JS写折叠下拉菜单

猜你喜欢