0

我正在使用嵌套的 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以避免在单击子项时触发父事件。

我的问题是，上面的实现有什么更好的跨浏览器解决方法吗？

提前谢谢你。

4

1 回答 1

1

您可以单独在 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; }

​</p>

于 2012-07-09T08:05:00.070 回答