jquery - 如何创建一个 3 级垂直风琴菜单，其图标可以打开和关闭 1 级和 2 级，同时保持实际链接可点击？

Question

我在这里找到了这个小提琴：http: //jsfiddle.net/aCaEG/来自上一篇文章。

我需要的是有一个向上向下箭头的图标，如手风琴，人们单击以打开和关闭菜单级别，但也有实际链接转到他们的目的地，而不是打开手风琴。

有人知道如何实现这一目标吗？

谢谢

HTML：

<ul>
    <li>
        <a href="#" title="#">level 1</a>
        <ul>
            <li>
                <a href="#" title="#">level 2</a>
                <ul>
                    <li><a href="#" title="#">level 3</a></li>
                    <li><a href="#" title="#">level 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS：

ul{
    margin:3px;
    border:1px solid red;  
}
ul ul{
    display:none;   
}
ul li:hover>ul{
    /*display:block;   */
}

JS：

$('li').click(function(ev) {
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();
});

Answer 1

javascript 和 HTML 的细微变化：

HTML - 您想为向下箭头添加跨度或链接：

level 2 <span class="open">v</span>

JS：

$('li span.open').click(function(ev) {
    $(this).next('ul').slideToggle();
    ev.stopPropagation();
});​

新小提琴：http: //jsfiddle.net/QhXR9/