代码之家 › 专栏 › 技术社区 › Dipak

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

parent-child jquery-selectors jquery

Dipak · 技术社区 · 7 年前

滑动分页

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

但我想一次只显示一个嵌套ul。我的意思是,当我单击一个li时,它应该只显示其子ul,而隐藏其他子ul。我在以前的jquery代码中添加了以下行

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

CSS

li ul{
    display:none;
}

<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 回复 | 直到 7 年前

Amal Alfin Paul 7 年前

尝试此代码

$("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>

推荐文章

Martin SpruÅ¡anský · 电子邮件输入未将电子邮件地址作为新闻稿订阅框中的有效输入

7 年前

luke · jQuery中的:valid和:invalid选择器

7 年前

Ian Vink · 向有条件的儿童添加类

7 年前

LMAOman · jQuery多选择器语法

7 年前

jayjaypg22 · 在多选择器中使用变量

7 年前

feetwet · 为什么是选择器。文本获取内部函数值?

7 年前

LeBlaireau · Jquery-使用数据属性选择父项

7 年前

Dipak · 如何显示当前李的独生子女并隐藏其他李子女

7 年前

TWiStErRob · 用于表中标签同级的jQuery选择器

7 年前

ToniWidmo · 在jquery中转义select选项值

7 年前