0

考虑这个简单的html列表：

<ul>
    <li><a href="http://google.com/">Test</a></li>
    <li><a href="http://google.com/">Test2</a>
        <ul>
            <li><a href="http://google.com">Test2 - 1</a></li>
            <li><a href="#3">Test2 - 2</a></li>
        </ul>
    </li>
</ul>

现在这 3条jQuery 行使其可折叠：

$('ul > li').on('click', function(e) {
    e.preventDefault();
    $(this).find('ul').slideToggle(); 
});

这里的问题是，如果一个链接被点击得更深，ul我希望它跟随链接，在 jQuery 中将是：

if(this.nodeName != 'A') {
    e.preventDefault();
}

目前nodeName是LI并且不是最后点击的子元素。

问题：是否可以在没有第二个事件处理程序的情况下执行此操作以处理更深的元素？（即$('ul > li ul li a').click()：）

我尝试e.stopPropagation了很多其他css selectors（ul > *等ul li）但没有成功。

4

3 回答 3

1

尝试这个：

$('li > ul').prev().on('click', function(e) {
    e.preventDefault();
    $(this).next().slideToggle();
});

这里是 jsfiddle 的链接。这里li > ul选择器找到每个ul孩子，li然后.prev()选择上一个兄弟（即a标签）。这样我们可以防止a标签的默认行为（即跟随链接）和slideToggle下一个（即ul）

于 2013-04-23T15:05:25.063 回答
0

由于您的根选择器是'ul > li'，它只会匹配 LI。即，您无法将点击与使用该选择器绑定的处理程序内的其他元素相匹配。

您可以做的是在处理程序中使用更通用的选择器和过滤器：

例如：

$('ul *').on('click', function(e) {

    // leaf LIs only
    if($(this).is('li') && $(this).children().length == 0) {
        e.preventDefault();
        $(this).find('ul').slideToggle();  
    }

});

或者，您可以组合选择器并使用一个处理程序来处理它，例如：

$('ul > li, ul > li ul li a').on('click', function(e) {
    if($(this).is('a')) return true; // follow links
    e.stopPropagation();
    $(this).find('ul').slideToggle(); 
}
于 2013-04-23T14:38:03.397 回答
0

经过一些研究，我得出了这个答案：

$('ul > li').on('click', function(e) {
     e.stopPropagation();

    if(!$(this).find('ul').length == 0) {
         e.preventDefault();
         $(this).find('ul').slideToggle();     
    } 
});

ul因此，如果在单击的元素中没有创建任何元素，它将跟随链接。如果您有更好的解决方案，请分享:)。

JSFiddle 在这里。

此解决方案不适用于指定ul的 by ID：

$('ul#test > li').on('click', function(e) {
     e.stopPropagation();

    if(!$(this).find('ul').length == 0) {
         e.preventDefault();
         $(this).find('ul').slideToggle();     
    } 
});

在这里看到更新的小提琴，有人可以解释为什么吗？

好的，感谢Simon我与我的听众一起纠正了li来自ul#test：

$('ul#test').on('click', 'li', function(e) {
     e.stopPropagation();

    if(!$(this).find('ul').length == 0) {
         e.preventDefault();
         $(this).find('ul').slideToggle();     
    } 
});

精彩的 ！

于 2013-04-23T14:32:49.073 回答