Jquery未正确展开li项

我正试图让我的新闻档案个性化地扩展。例如，如果我点击2014，那么一月和二月必须显示，但它们必须保持关闭状态，如果你点击一月，一月必须打开，二月必须关闭

我遇到的问题是，如果我点击2014，它就会打开，但如果我点击1月或2月，2014年就会关闭，而不是一直打开，我点击的月份就会打开

我的html

<div class="news-archive">
    <ul class="yearly-archive">
        <li class="year_2014">2014
            <ul class="monthly-archive">
                <li class="january">
                    <ul class="archive">
                        <li>January 1</li>
                        <li>January 2</li>
                    </ul>
                </li>

                <li class="february">
                    <ul class="archive">
                        <li>February 1</li>
                        <li>February 2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

我的js

这里有一个JSIDLE:

使用防止事件在DOM树中冒泡

$('.year_2014').click(function () {
    $('.year_2014 .monthly-archive').toggle();
});

$('.january').click(function (e) {
    e.stopPropagation();
    $('.january .archive').toggle();
});

$('.february').click(function (e) {
    e.stopPropagation();
    $('.february .archive').toggle();
});

---

尝试简单地完成任务，而不为每个li元素编写单击事件

$('div.news-archive ul li').click(function(e){
     e.stopPropagation();
     var elem = $(this).find('ul:first');
     elem.length ? elem.toggle() : $(this).closest('ul').toggle();
});

您还可以使用：

$('.year_2014').click(function () {
    $(this).toggleClass('year_2014 monthly-archive');
});

$('.january').click(function (e) {
    e.stopPropagation();
    $(this).toggleClass('january archive');
});

$('.february').click(function (e) {
    e.stopPropagation();
    $(this).toggleClass('february archive');
});

---

如果你有50年的新闻，你会添加50个

点击事件处理程序吗？和12
单击事件处理程序12个月？关于您的问题：add
return false在
$（'.一月.archive'）.toggle（）之后您可能想解释一下，之所以会发生这种情况，是因为ul是嵌套的，所以当您单击一个子项时，您仍然在单击父项。@SanderKoedood现在看到更新的代码，我刚刚发布了更新的代码answer@upvoters：如果你让他以自己的方式，那么他会为每个月写一个点击事件。：）这是编写代码的正确方法吗@RajaprabhuAravindasamy你再次证明了你是个天才：）@RajaprabhuAravindasamy这个答案解释了为什么代码不起作用。。。是的，你可以为所有元素提供一个函数，但这不是问题本身的重点。你的答案不提供问题的解释。这对将来更有用users@user3656554很乐意帮忙。！
$('div.news-archive ul li').click(function(e){
     e.stopPropagation();
     var elem = $(this).find('ul:first');
     elem.length ? elem.toggle() : $(this).closest('ul').toggle();
});

$('.year_2014').click(function () {
    $(this).toggleClass('year_2014 monthly-archive');
});

$('.january').click(function (e) {
    e.stopPropagation();
    $(this).toggleClass('january archive');
});

$('.february').click(function (e) {
    e.stopPropagation();
    $(this).toggleClass('february archive');
});