[英]what is the best approach to implement Tree View?
我正在通過使用嵌套的ul li標簽構造樹視圖,如下所示:
<ul>
<li>Level 1 a
<ul>
<li>Level 2 a</li>
<li>Level 2 b
<ul>
<li>Level 3 a</li>
<li>Level 3 b</li>
</ul>
</li>
</ul>
</li>
<li>Level 1 b</li>
</ul>
我希望在樹狀視圖中導航時,列表項在單元格上可單擊,如下所示:
我知道我們可以在列表項上添加JavaScript函數,如下所示:
<li onClick="redicrectPage(url)">
並添加event.cancelBubble = true
以避免單擊子項時觸發父事件。
我的問題是,以上實現是否有更好的跨瀏覽器解決方法?
在此先感謝您。
您可以單獨在CSS中創建嵌套菜單結構,這將消除冒泡問題。 http://jsfiddle.net/steveukx/HfDBA/上的示例使用直接后代選擇器可以重復相同的選擇器,而無需知道菜單的深度,但是如果您支持的瀏覽器不具有此功能功能,您應該更改HTML以添加類以在樹中命名深度並在CSS中指定深度。
HTML:
<ul class="menu">
<li><a href="#">Level 1 a</a>
<ul>
<li><a href="#">Level 2 a</a></li>
<li><a href="#">Level 2 b</a>
<ul>
<li><a href="#">Level 3 a</a></li>
<li><a href="#">Level 3 b</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Level 1 b</a></li>
</ul>
的CSS
* { font-family: tahoma, sans-serif; font-size: 10pt; }
a { text-decoration: none; color: #fff; display: block; }
ul { display: none; }
ul.menu, li:hover > ul { display: block; }
li > ul { position: absolute; top: 25%; left: 100%; margin-left: -1em;
box-shadow: -1px 1px 1px rgba(0,0,0,0.5); z-index: 1000; }
li { position: relative; padding: 0.1em 0.5em; width: 100px; background: silver;
box-shadow: -1px 1px 1px rgba(0,0,0,0.5); margin: 1px 1px 0; }
li:hover { background-color: #333; }
li:hover > a { color: #FAFAFE; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.