js+css在互動上的應用

但靈活應用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優先順序》。