jQuery Hide/Show 仅在父 li

Question

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

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

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

现在当我点击我不想发生的子 li 列表 (ul.2015) 时它隐藏了，我只希望 show/hide 在父 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

您只需要遵循以下代码并从 jquery 代码中删除其他代码。

var ulSub = $('ul.2015');

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

Demo

Answer 2

子项隐藏，因为您将 ul 换成 li.2015。

你的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>

当您点击子项目时，首先会经过 parent li，您用 child 包装了它。

这样试试

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

Answer 3

实际上父 li 包含子 li 元素，这就是它以这种方式发生的原因。使用额外的 span 元素尝试下面的代码将解决问题。

    <div class="content">
    <ul class="date">
        <li class="2015"><span id="spanId">2015</span>
        <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>

    (function() {
var ulSub = $('ul.2015');

$('li.2015 span#spanId').on('click', function(e) {
    e.preventDefault();
    ulSub.toggle();
});

    $('a[href="#"').on('click', function(e) {
    e.preventDefault();
});

})();

jQuery Hide/Show 仅在父 li

jQuery Hide/Show only on the parent li

javascript

jquery

html-lists