jquery - 如何从jQuery 的 toggle() 方法中启用点击事件？

Question

我有一个树形菜单。此菜单中的最后一个<li>元素包含一个<a>元素。

我正在使用 jQuerytoggle()方法。

我知道默认情况下toggle()包含一个e.preventDefault()。

我想做的是将点击事件返回给<a>元素。

你能帮忙吗？

HTML：

<ul class="menu">
    <li>
        Item1
        <ul style="display: none">
            <li>
                subItem1
                <ul style="display: none">
                    <li>
                        <a href="http://www.google.com">Google</a>
                    </li>
                    <li>
                        <a href="http://www.yahoo.com">Yahoo</a>
                    </li>
                    <li>
                        <a href="http://www.facebook.com">Facebook</a>
                    </li>     
                </ul>
            </li>
        </ul>
    </li>
</ul>

Javascript：

$(".menu li").toggle(
    function() {
        $(this).children().slideDown();
    },

    function() {
        $(this).children().slideUp(); 
    }
);

请检查这个小提琴：http: //jsfiddle.net/fzy48/

Answer 1

你错过了一些结束标签。

请参阅更新的小提琴。

$(".menu li").on('click', function(e) {
    e.stopPropagation();
    $(this).children('ul').slideToggle();
});

使用该on()方法，您可以更好地控制您的功能。您需要的是stopPropagation()方法：它可以防止单击事件将 dom 树冒泡到li可以滑动切换它的父级。

此外，通过将 clicked 的子项过滤li为 only ul's，您可以更明确地了解您想要切换的内容。

Answer 2

Flauwekeul 的替代版本，使用.on()事件委托：

$('.menu').on('click', 'li', function(event){
    if (event.target != this) {
     return;//dont want bubbled up events
    }
    $(event.target).children('ul').slideToggle();
});

在http://jsfiddle.net/fzy48/5/中查看

使用事件委托的优点是我们只附加一个事件处理程序（在父.menu元素中），而不是每个li元素一个事件处理程序。