前幾天,去一家國企機試的時候,遇到一道使用JavaScript實現樹狀顯示的題目.這篇文章是本人的一點點心得,有不好的地方,希望各位高手斧正.
切入正題吧.樹狀顯示,將需要展示給用戶看的資料顯示,將用戶不想看到的內容隱藏.我們要做的只是獲取用戶所點擊的對象,再判斷對象的狀態.當其狀態為顯示時,我們將它隱藏.反之,將它顯示.使用Html的<ul>以及<li>這兩個標簽可以很多地做到這一點.
<ul>
<li>
<!-- href="#"表示偽連接.當用戶點擊時,不跳轉 -->
<a id="products" href="#">[+]Product</a>
<ul id="productsmenu" style="display: none">
<li>Product</li>
<li>Other Form</li>
<li>Price</li>
</ul>
</li>
</ul>
學習JavaScript比較麻煩的地方是浏覽器兼容問題.這裡的var whichlink = (e.target) ? e.target.id : e.srcElement.id;是根據不同的浏覽器拿到其所兼容的對象的ID值event.target是Firefox上的,而event.srcElement是IE4以上的.
<script type="text/Javascript">
//由於document.getElementById()頻繁被使用,這裡簡化成$()
function $(id){
return document.getElementById(id);
}
function toggle(e){
if(!e){
//如果沒有定義e,則給e賦值window的事件對象event
e = window.event;
}
/*
Firefox 下的 event.target = IE 下的 event.srcElement.
當e.target沒有被定義時,使用IE下的e.srcElement.id.
反之,則使用e.target.id.
*/
var whichlink = (e.target) ? e.target.id : e.srcElement.id;
var obj = $(whichlink+"menu");
//獲取obj是否顯示
var visible = (obj.style.display=="block");
var key = $(whichlink);
var keyname = key.firstChild.nodeValue.substring(3);
if(visible){
obj.style.display = "none";
key.firstChild.nodeValue = "[+]" + keyname;
}else{
obj.style.display = "block";
key.firstChild.nodeValue = "[-]" + keyname;;
}
/*
防止滾動條滑動.由於使用了偽連接,當點擊連接時,浏覽器雖然不跳轉,但滾動條會置頂,
這裡加上return false;可以防止滾動條置頂
*/
return false;
}
$("products").onclick = toggle;
</script>
本文只是對樹狀顯示,進行簡單的描述與實現,不周的地方,希望大家見諒.
