Question

我试图让我的新闻档案单独扩展。因此，例如，如果我点击2014年，则必须显示1月和2月，但必须保持关闭，如果您点击1月，1月必须打开，2月必须关闭。

我遇到的问题是，如果我点击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>

我的css

.year_2014 .monthly-archive {
    display: none;
}

.january .archive{
    display: none;
}

我的js

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

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

这是一个jsfiddle：JSFIDDLE

Answer 1

使用 stopPropagation(); 阻止事件冒泡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();
});

DEMO

Answer 2

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

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

DEMO

Answer 3

您也可以使用：

$('.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');
});

Demo

Jquery没有正确扩展li项目

3 个答案:

DEMO

DEMO