但灵活应用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、再点击， 子菜单隐藏。 半年前的我的做法会是这样：取得#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代码： 复制代码 代码如下: #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); 看看代码，貌似第三种方法跟第二种差不多嘛。 恩~~，如果点击h3元素不止是修改下一个ul元素的显示状态，比如还要修改h3的背景图案呢？ 这时候第二个方法需要在根据h3的background属性来修改值，而第三种只需要添加一条样式：#nav li.menu h3{background:url(...)}即可了。 其他的就没什么好说了。大家都有自己的判断，孰优孰劣心里自有评断。 PS： 如果一个页面存在别的样式表影响了你的样式，就会有个优先权的问题。我们都知道id，class和tag的优先级别，但是对一个表达式，它的优先权是怎么计算的呢？ 请google一下，或者先看看《老调重弹的CSS优先级》。

　　推荐阅读

　　6个DIV 135或246间隔一秒轮番显示效果

在某技术群看到 A君 提出的如下一个问题: A君 6个DIV 间隔一秒 轮番进行奇偶显示. 比如先135 一秒后 246 然后再135 循环 A君 要求代码短小精悍 B君 复制代码 代码如下:var a = document.getElementsByTagName('div>>>详细阅读

本文标题：js+css在交互上的应用

地址：http://www.17bianji.com/kaifa2/JS/25994.html

 1/2    1