利用CSS类名与JS交互实现菜单显隐及样式联动

CSS交互与JS结合的思路

合理且灵活地运用CSS，往往能带来令人耳目一新的视觉效果。

下面通过一个具体的示例来说明这一观点。

CSS代码：

 
#nav li ul {
display:none;
} 

HTML代码：

 
<div id="nav">
<ul class="">
<li>
<h3>菜单1</h3>
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
</ul>
</li>
<li>
<h3>菜单2</h3>
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
<li>子菜单4</li>
</ul>
</li>
</ul>
</div>

效果如下：

期望达到的效果包括：

1、页面加载初始状态下，所有子菜单均处于隐藏状态。

2、当用户点击某个菜单项时，对应的子菜单列表应当显示出来。

3、若再次点击已展开的菜单项，子菜单应重新隐藏。

传统JS直接操作DOM的方法

半年前，我通常会采用以下方式：获取#nav容器内的所有h3元素，遍历并为每个元素绑定点击事件。在事件处理函数中，判断其下一个兄弟节点是否隐藏，并根据当前状态动态修改子菜单ul元素的display属性。

相关代码逻辑大致如下：（以下代码仅用于演示逻辑，不保证可直接运行。）

 
var els = [...]; //代码取得h3元素数组。
for(var i=0; i < els.length; i++) {
els[i].addEventListener("click",function() {
var target = this.nextSibling;
if(target.style.display == "none")
target.style.display = "block";
else
target.style.display = "none"
}, false);
} 

基于事件委托的改进方案

一个月前，我的做法有所改进：直接在#nav > ul容器上绑定事件，通过事件对象判断目标节点是否为h3。如果是，则获取其下一个兄弟节点，并根据该节点的显示状态来切换display属性。

相关代码大致如下：

 
var container = document.getElementById("nav");
container.addEventListener("click", function(e) {
var target = e.target, list;
if(target.tagName == "H3") {
list = target.nextSibling;
if(list.style.display === "none")
list.style.display = "block";
else
list.style.display = "none";
　　} 
}, false);

这两种做法各有优劣，读者可自行评估。

利用CSS类名控制交互与样式

近期在处理一个需求时，我接触到了一种新思路——这正是本文想要探讨的核心：利用CSS来完成交互逻辑。

相关代码如下：

CSS代码：

 
#nav li.menu ul {
display:block;
} 

JS代码大致如下：

 
var el = document.getElementById("nav");
el.addEventListener("click", function(e) {
var target = e.target.parentNode;
if(target.tagName == "LI") {
if(target.className == "")
target.className = "menu";
}else {
target.className = "";
　　　　} 
　　} 
}, false);

乍看之下，第三种方法的JS代码似乎与第二种方法相差无几。

然而，如果点击h3元素不仅仅是为了切换下一个ul元素的显示状态，还需要同时修改h3的背景图片呢？

在这种情况下，第二种方法需要在JS中额外编写逻辑来修改h3的background属性；而第三种方法只需在CSS中增加一条规则：#nav li.menu h3{background:url(...)}即可自动生效。

除此之外，便无更多复杂之处。优劣如何，读者心中自有一杆秤。

CSS优先级注意事项

PS：

如果页面中存在其他样式表干扰了当前样式，就会涉及优先权的问题。虽然大家熟知id、class和tag的优先级规则，但对于复合选择器表达式，其优先级是如何计算的？

建议通过搜索引擎查询，或参考《老调重弹的CSS优先级》一文。