Question

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

我让它工作到当你点击父li（li.2015）时，子li（ul.2015）列表被显示和隐藏。

但是，我只希望此行为在父li（li.2015）上工作，而不是在点击子列表（ul.2015）时。

现在，当我点击我想要发生的子列表（ul.2015）时它隐藏了，我只希望show / hide在父li上运行（{{1 }}）。

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

HTML

li.2015

jquery的

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

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>

当您点击子项目时，首先会浏览您将孩子包裹起来的父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();
});

Answer 3

实际上，Parent 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仅在父li上隐藏/显示

3 个答案: