|
|
以下用一個簡單的例子來闡述我想說的。
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優先級》。
JavaScript技術：js+css在交互上的應用，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
