如何只显示当前李的孩子并隐藏其他李子

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>