什么是实现树视图的最佳方法？

Question

I'm working Tree View constructed by using nested ul li tag as below:

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

I wanted the list item is clickable on cell when navigate across the Tree View like below:

I know that we can added JavaScript function on list item as below:

 <li onClick="redicrectPage(url)">

and add event.cancelBubble = true to avoid parent event is trigger when child item clicked.

My question is, any better cross-browser workaround on the implementation above?

Thank you in advanced.

Answer 1

You can make a nested menu structure in CSS alone which would remove the bubbling problem. The example at http://jsfiddle.net/steveukx/HfDBA/ uses the direct descendent selector to be able to repeat the same selectors without needing to know the depth of the menu, but if you are supporting browsers that don't have this functionality you should change the HTML to add classes to name the depth in the tree and specify those in the 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; }

​