javascript - jQuery 仅在父 li 上隐藏/显示

Question

我是 jQuery 新手，正在尝试隐藏和显示 li 列表。

我让它工作，当您单击父 li (li.2015) 时，子 li (ul.2015) 列表会显示和隐藏。

但是，我只希望此行为在父 li (li.2015) 上起作用，而不是在单击子 li 列表 (ul.2015) 时起作用。

现在，当我单击子 li 列表 (ul.2015) 时，它会隐藏，我不希望发生这种情况，我只希望显示/隐藏在父 li 上运行( li.2015)。

为此我需要对 jQuery 进行哪些更改？

html

<div class="content">
    <ul class="date">
        <li class="2015">2015
        <ul class="2015">
            <li><a href="http://google.com">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
        </li>
    </ul>
</div>

jquery

(function () {
    var ulSub = $('ul.2015');
    $('li.2015').on('click', function (e) {
        e.stopPropagation();
        ulSub.toggle();
    });
    ulSub.hide();
    $(this).on('click', function () {
        ulSub.hide();
    });
})();

Answer 1

子项隐藏，因为您用 li.2015 包裹 ul。

你的html

<div class="content">
    <ul class="date">
        <li class="2015">2015
        <ul class="2015">
            <li><a href="http://google.com">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
        </li>
    </ul>
</div>

当您单击子项时，首先将浏览您包裹子项的父项li。

尝试这样

HTML

<div class="content">
    <ul class="date">
        <li class="2015">2015</li>

            <ul class="2015">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            </ul>


    </ul>
</div>

Javascript

var ulSub = $('ul.2015');
ulSub.hide();
$('li.2015').on('click', function(e) {
    e.stopPropagation();
    ulSub.toggle();
});