Question

我有一个列表项，如下所示，我想隐藏任何列表项的子项，里面有另一个列表。如果我点击列表一，二，三，......他们应该切换，但如果我点击1.1,1.2他们不应该切换，因为1.1,1.2内没有列表，......

<ul>
    <li class="curchange">one
        <ul>
            <li><a href="#">1.1</a></li>
            <li><a href="#">1.2</a></li>
            <li><a href="#">1.3</a></li>
        </ul>
    </li>
    <li class="curchange">two
        <ul>
            <li><a href="#">2.1</a></li>
            <li><a href="#">2.2</a></li>
            <li><a href="#">2.3</a></li>
        </ul>
    </li>
    <li class="curchange">three
        <ul>
            <li><a href="#">3.1</a></li>
            <li><a href="#">3.2</a></li>
            <li><a href="#">3.3</a></li>
        </ul>
    </li>
    <li class="curchange">four
        <ul>
            <li><a href="#">4.1</a></li>
            <li><a href="#">4.2</a></li>
            <li><a href="#">4.3</a></li>
        </ul>
    </li>
    <li class="curchange">five
        <ul>
            <li><a href="#">5.1</a></li>
            <li><a href="#">5.2</a></li>
            <li><a href="#">5.3</a></li>
        </ul>
    </li>
</ul>

下面是我的代码，但如果我点击1.1,1.2仍然隐藏它们

$(document).ready(function() {

    $("li").click(function(e) {
        e.stopPropagation();

        //hide it's children
        var curEle = $(this);

        if (curEle.has("li")) curEle.children().toggle();
    });

});

Answer 1

<li class="curchange">one
    <ul>
        <li><a href="#">1.1</a></li>
        <li><a href="#">1.2</a></li>
        <li><a href="#">1.3</a></li>
    </ul>
</li>

如果您不希望子li触发该函数，则需要在.click（）之前在选择器中指定类curchange

$(document).ready(function() {
    $("li.curchange").click(function(e){
        $(this).children("ul").toggle();
    });
});

Answer 2

而不是

if(curEle.has("li"))
  curEle.children().toggle();
});

试

curEle.has("li").children().toggle();

由于.has返回一组经过滤的对象。

http://api.jquery.com/has/

Answer 3

试试这个

http://sandbox.phpcode.eu/g/ae4bd.php#

curEle.has("li").children().toggle()

Answer 4

$("li > li").toggle();

这可能有效

无法使用jquery </li>检查<li>是否存在于另一个<li> <li>中

4 个答案: