Javascript jQuery仅在父li上隐藏/显示

我是jQuery新手，正在尝试隐藏和显示

li

列表

当您单击父li（

li.2015

）时，子li（

ul.2015

）列表将显示并隐藏

但是，我只希望此行为在父li（

li.2015

）上起作用，而不是在单击子li列表（

ul.2015

）时起作用

现在，当我单击子li列表（

ul.2015

）时，它会隐藏，我不希望发生这种情况，我只希望显示/隐藏在父li（

li.2015

）上

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

html

---

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

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

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

---

子项隐藏，因为您使用

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>

Javascript

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

---

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

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

})();

2015年







（功能（）{
var ulSub=$（'ul.2015'）；
$（'li.2015 span#spanId'）。在（'click'，函数（e）上{
e、 预防默认值（）；
ulSub.toggle（）；
});
$（'a[href=“#””）。在（'click'，函数（e）上{
e、 预防默认值（）；
});
})();

尝试了此操作，单击

ulSub li

列表（1,2,3）仍将其隐藏。我只希望此操作对父li有效。

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

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

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

})();