如何显示当前li的独生子并隐藏其他li子

Question

我的页面中嵌套了多个 ul。嵌套的 ul 通过以下 jquery 代码显示。

Jquery

$("li").click(function(){
    $(this).children("ul").show("slow");
});

但我想一次只显示一个嵌套的 ul。我的意思是当我点击一个 li 时，它应该只显示它的子 ul 而隐藏其他子 ul。我在之前的 jquery 代码

中添加了以下行

$("li ul").not(this).hide("slow");

但是没用。

CSS

li ul{
    display:none;
}

HTML

<li>
    <a href="#">Insert + </a>
    <ul>
        <li>
            <a href="services.php">Services</a>
        </li>
        <li>
            <a href="notice.php">Notice and Information</a>
        </li>
    </ul>
</li>

<li>
    <a href="#">View + </a>
    <ul>
        <li>
            <a href="services.php">Comments</a>
        </li>
        <li>
            <a href="notice.php">Status</a>
        </li>
    </ul>
</li>

Answer 1

试试这个代码

$("li").click(function(){
    $("li").not(this).children("ul").hide("slow");
    $(this).children("ul").show("slow");
});

$("li").click(function(){
    $("li").not(this).children("ul").hide("slow");
    $(this).children("ul").show("slow");
});

li ul{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<li>
    <a href="#">Insert + </a>
    <ul>
        <li>
            <a href="services.php">Services</a>
        </li>
        <li>
            <a href="notice.php">Notice and Information</a>
        </li>
    </ul>
</li>

<li>
    <a href="#">View + </a>
    <ul>
        <li>
            <a href="services.php">Comments</a>
        </li>
        <li>
            <a href="notice.php">Status</a>
        </li>
    </ul>
</li>

如何显示当前li的独生子并隐藏其他li子

How to show only child of current li and hide other li child

jquery

parent-child

jquery-selectors