Question

我正在使用嵌套的uls解析markdown文件以创建一个折叠式文档系统，您可以在其中单击每个元素后跟一个ul并展开以查看它的内容。

结构大致如下：

h4 (click to expand)
  ul
    li (click to expand)
      ul
        li (click to expand)
          ul

这是我的代码：

$('li').each(function(){
  if($(this).children().is('ul')) {
  $(this).addClass('link').bind('click', function(e){
    e.stopPropogation();
    $(this).children('ul').slideToggle();
  }); }
});

当我点击第二个li触发器（第2级？）时没有stopPropigation（），它确实展开了它的内容，但也折叠了父，这显然使它成为一个模拟行动。如果我使用stopProp它会一起杀死这个函数。

思想？

Answer 1

this：

怎么样？

$("li").click(function(event) {
    if (event.srcElement = event.currentTarget) {
        $(this).children("ul").slideToggle();
        event.stopPropagation();
    }
});

Answer 2

我会用这样的东西：

$('li').has('ul').addClass('link').click(function(){
    $(this).children('ul').slideToggle();
});

那样你甚至只用ul瞄准li，所以应该可以正常工作。

希望有所帮助：）

修改 - 这也会关闭所有打开的孩子：

$('li').has('ul').addClass('link').click(function(){

    var $li = $(this),
        $ul = $li.children('ul');

    if( $li.is('.open') ){
        $ul.slideUp();
        $li.removeClass('open');
        $li.find('li.open').click(); // Also close the open children
    }else{
        $ul.slideDown();
        $li.addClass('open');
    }

});

Answer 3

这个怎么样：http://jsfiddle.net/aCaEG/

Answer 4

我认为通过采用由内而外的方法来选择元素，这是更容易的。在整个包装器中，选择uls然后找到他们的父LI。

$(".listWrapper").find('ul').parent('li').on('click', function(evt){
    $(this).children('ul').slideToggle();
    evt.stopPropagation();
}).children('span').addClass('link');

如果您还希望每个H4标题下的列表都可以折叠，那么这需要单独完成。

$(".listWrapper").find('ul').prev('h4').addClass('link').on('click', function(evt){
    $(this).next('ul').slideToggle();
});

注意：我发现每个“带子列表的项目”周围都需要跨距，以允许选择该文本，从而防止所有子列表文本加下划线。尝试没有跨度，你会看到我的意思。可能有更好的方法来达到同样的目的。

所有这些都在fiddle

中展示

绑定点击嵌套ul

4 个答案: