雖然標題這樣寫(xiě)，但實(shí)際上使用 JavaScript + DOM/CSS 組合可以實(shí)現很多強大的功能。昨天看到 fisio 提到這種鼠標懸停時(shí)展開(kāi)的菜單，我原來(lái)也沒(méi)有用過(guò)，經(jīng)他一提醒覺(jué)得還是挺有用處的，尤其在有很多內容的頁(yè)面上。
廢話(huà)最后再說(shuō)，直接給出代碼先：
JavaScript
<script type="text/javascript">
function popMenu(objId) {
var obj = document.getElementById(objId);
if (obj.style.display == 'none') {
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
}
</script>
function popMenu(objId) {
var obj = document.getElementById(objId);
if (obj.style.display == 'none') {
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
}
</script>
在頁(yè)面中使用
<div id="menuCaption" onmouseover="popMenu('menuLists');" onmouseout="popMenu('menuLists');">
<!-- 當鼠標懸停在這里時(shí)顯示下面列表的內容 -->
<ul id="menuLists" style="display:none;">
<!-- 這里是鼠標懸停時(shí)顯示的內容 -->
<li>菜單列表內容</li>
<li>菜單列表內容</li>
<li>菜單列表內容</li>
</ul>
</div>
<!-- 當鼠標懸停在這里時(shí)顯示下面列表的內容 -->
<ul id="menuLists" style="display:none;">
<!-- 這里是鼠標懸停時(shí)顯示的內容 -->
<li>菜單列表內容</li>
<li>菜單列表內容</li>
<li>菜單列表內容</li>
</ul>
</div>
原理
頁(yè)面調用之初，只有 menuCaption 即菜單的標題顯示，menuLists 這些菜單列表的內容不顯示；但當鼠標進(jìn)入菜單標題區域后，會(huì )激活 popMenu 函數把 menuLists 的樣式從“display:none”改為“display:block”，這樣 menuLists 的內容就顯示出來(lái)了；鼠標離開(kāi)菜單標題區域后再次隱藏列表內容。
SEO 方面的疑問(wèn)
由于頁(yè)面的代碼中有“display:none”，相當于存在隱藏文字，我不敢確定 Google 對這類(lèi)隱藏文字的態(tài)度，所以各位要使用的時(shí)候請務(wù)必小心，做好可能會(huì )被 Google 降權的心理準備。
