3深jquery ul列表 - 只需要第二个ul显示当第一次点击

我有一个三深ul列表。当点击顶部ul时，我只希望第二个ul显示。然后当第二个ul被点击时，第三个应该显示。现在发生的是当第一个ul被点击时，所有ul的下方显示。我怎样才能使这个工作正常？3深jquery ul列表 - 只需要第二个ul显示当第一次点击

代码：

jQuery(document).ready(function() { 
    jQuery('.list-year').addClass('list-year-left'); 
    jQuery('.list-year').on('click',(function() { 
    jQuery('.list-year').toggleClass('list-year-down'); 
    jQuery('.list-month').toggle(); 
    })); 

});

我有一个js小提琴链接：http://jsfiddle.net/7xbjr/4/任何帮助，非常感谢！

来源

2013-03-03 user1625714

不应该有一些使用'$（本） “在处理者？否则，您可以切换所有年份和月份，而不仅仅是您点击UL时的那些。你的小提琴只有一年和一个月，所以它不会遇到这个问题。 – Barmar 2013-03-03 14:18:26

<li>的等级是list-post，但您已将其定义为list-posts，它与此不匹配。

.list-posts { 
    display: none; 
}

应该成为

.list-post { 
    display: none; 
}

而且，点击事件应绑定到<li>元素而不是<ul>。请注意，如果您在children元素中绑定了一个click事件，建议停止事件传播，否则click事件将传播到父级的click事件。

这里是JavaScript

jQuery(document).ready(function() { 
    jQuery('.list-year').addClass('list-year-left'); 
    jQuery('.list-year > li').on('click', function() { 
     jQuery('.list-year').toggleClass('list-year-down'); 
     jQuery('.list-month').toggle(); 
    }); 

    jQuery('.list-month > li').on('click',function(e) { 
     e.stopPropagation(); // add this for avoiding click event propagate to parent 
     jQuery('.list-post').toggle(); 
    }); 
});

的jsfiddle：http://jsfiddle.net/BMc43/2/

来源

2013-03-03 14:14:27 Derek

您的代码可以更加整洁，但在这里，你去http://jsfiddle.net/BMc43/3/：

jQuery(document).ready(function() { 
    jQuery('.list-year').addClass('list-year-left'); 
    jQuery('.list-year').on('click',(function() { 
     jQuery('.list-year').toggleClass('list-year-down'); 
     jQuery('.list-month').toggle(); 
    })); 

    jQuery('.list-month').on('click',(function(e) { 
     e.stopPropagation(); 
     jQuery('.list-post').toggle(); 
    })); 
});

当然，你必须改变.list-posts Derek说，在CSS中使用.list-post。

来源

2013-03-03 14:14:35

下面的事情是错误的：

你有一个班级列表后，你把它称为列表的帖子。
无论您何时单击某个子节点，都会触发您的点击事件，再次触发切换并关闭菜单。
你需要第三级菜单

http://jsfiddle.net/7xbjr/5/ 这里增加一个额外的点击事件是一个更新的小提琴其中工程

jQuery(document).ready(function() { 
jQuery('.list-year').addClass('list-year-left'); 
    jQuery('.list-year > li').on('click',function() { 
    jQuery('.list-year').toggleClass('list-year-down'); 
    jQuery('.list-month').toggle(); 
    }); 
    jQuery('.list-month > li').on('click',function() { 
    jQuery('.list-post').toggle(); 
    }); 
});

来源

2013-03-03 14:16:44 Rodik

Thanx！这是完美的。 – user1625714 2013-03-04 05:45:15

它是习惯于upvote并选择一个正确的答案，一旦你找到一个工程。 =） – Rodik 2013-03-04 12:26:06

3深jquery ul列表 - 只需要第二个ul显示当第一次点击

回答

相关问题