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>

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

1 个答案: