js+css在交互上的应用_javascript技巧-js教程-PHP中文网

js+css在交互上的应用_javascript技巧

php中文网

发布： 2016-05-16 18:22:54

原创

1563人浏览过

但灵活应用CSS会有给人眼前一亮的感觉！

以下用一个简单的例子来阐述我想说的。

CSS代码：

国洋商务通

Gyb2b V1.01免费版可终身使用,是一款功能强大的B2B电子商务应用软件。该软件不仅更新和修改了V1.0相关功能，更是采用了目前互联网上最流行的LAMP组合（Linux+Apache+Mysql+PHP）开发完成，模板技术实现了界面与代码的有效分离，用户可以快速地在此基础上编译模板；提供B2B电子商务应用最常见的求购、供应、商品、公司库、行业资讯、商圈、资信认证、在线交易、交易评分、留言、搜

查看详情

复制代码代码如下:

 
#nav li ul { 
display:none; 
} 

HTML代码：

复制代码代码如下:

 
菜单1 

子菜单1

子菜单2

子菜单3

子菜单4

菜单2 

子菜单1

子菜单2

子菜单3

子菜单4

子菜单4

效果如下：

需要的效果是：

1、初始时，所有的子菜单都是隐藏的。

2、点击菜单项，相应的子菜单列表显示。

3、再点击，子菜单隐藏。

半年前的我的做法会是这样：取得#nav中的h3元素，循环在其上添加事件。事件判断其下一个兄弟节点是否隐藏，根据状态修改子菜单ul元素的display属性。

代码大致如下：（以下所有代码仅用于表达逻辑，请不要纠结于是否可执行。）

复制代码代码如下:

 
var els = [...]; //代码取得h3元素数组。 
for(var i=0; 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优先级》。