js+css在交互上的應(yīng)用

更新時間：2010年07月18日 23:42:56 作者：

關(guān)于css應(yīng)用。以前一直認為css就是做布局樣式，只能表現(xiàn)頁面，跟交互是沒關(guān)系的。事實上也基本不會往那邊想。

但靈活應(yīng)用CSS會有給人眼前一亮的感覺！

以下用一個簡單的例子來闡述我想說的。

CSS代碼：

 
#nav li ul { 
display:none; 
} 

HTML代碼：

復(fù)制代碼代碼如下:

 
<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、點擊菜單項，相應(yīng)的子菜單列表顯示。

3、再點擊，子菜單隱藏。

半年前的我的做法會是這樣：取得#nav中的h3元素，循環(huán)在其上添加事件。事件判斷其下一個兄弟節(jié)點是否隱藏，根據(jù)狀態(tài)修改子菜單ul元素的display屬性。

代碼大致如下：（以下所有代碼僅用于表達邏輯，請不要糾結(jié)于是否可執(zhí)行。）

復(fù)制代碼代碼如下:

 
var els = [...]; //代碼取得h3元素數(shù)組。 
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上直接添加事件，在事件中判斷目標(biāo)對象是否h3對象。如果是則取得下一個兄弟節(jié)點，并根據(jù)其顯示狀態(tài)來修改display屬性。
代碼大致如下：

復(fù)制代碼代碼如下:

 
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); 

兩種做法，孰優(yōu)孰劣請自行判斷。
前段時間做了一個需求，在代碼中看到另外的一種思路——這才是我在這里要說的——利用CSS來完成交互。
依然是代碼：
CSS代碼：

復(fù)制代碼代碼如下:

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

JS代碼大致如下：

復(fù)制代碼代碼如下:

 
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元素的顯示狀態(tài)，比如還要修改h3的背景圖案呢？
這時候第二個方法需要在根據(jù)h3的background屬性來修改值，而第三種只需要添加一條樣式：#nav li.menu h3{background:url(...)}即可了。

其他的就沒什么好說了。大家都有自己的判斷，孰優(yōu)孰劣心里自有評斷。

PS：
如果一個頁面存在別的樣式表影響了你的樣式，就會有個優(yōu)先權(quán)的問題。我們都知道id，class和tag的優(yōu)先級別，但是對一個表達式，它的優(yōu)先權(quán)是怎么計算的呢？
請google一下，或者先看看《老調(diào)重彈的CSS優(yōu)先級》。

您可能感興趣的文章: