什麼是實現樹視圖的最佳方法？

我正在使用如下嵌套UL L1標籤構建樹視圖：什麼是實現樹視圖的最佳方法？

<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>

我想整個樹視圖導航時，像下面的列表項是對細胞點擊：

enter image description here

我知道我們可以在如下列表項中添加JavaScript函數：

<li onClick="redicrectPage(url)">

，並添加event.cancelBubble = true以避免父項事件觸發子項目點擊。

我的問題是，有關上述實施的更好的跨瀏覽器解決方法？

謝謝您的高級。

來源

2012-07-09 sams5817

谷歌搜索「jQuery的菜單的例子」產生了很多有用的信息 – Michael 2012-07-09 06:32:09

你可以把一個「Node title」，而不僅僅是「結題「在每個」李「標籤中，但這不會執行與子菜單之間的導航，這是大多數jQuery TreeView插件所做的。你可以看看如何jsTree，dynatree，... – Ricola3D 2012-07-09 07:28:53

你可以在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; }

來源

2012-07-09 08:05:00 steveukx

什麼是實現樹視圖的最佳方法？

回答

相關問題