文章/答案/技术大牛

发布

如何隐藏使用jQuery隐藏其子ul-li元素的父li元素？

使用jQuery隐藏包含子ul-li元素的父li元素

基础概念

在HTML结构中，我们经常需要处理嵌套的列表元素（ul-li）。有时需要根据子元素的存在与否来操作父元素。

解决方案

方法1：使用`:has()`选择器

$('li:has(ul)').hide();

这会选择所有包含ul元素的li元素并将其隐藏。

方法2：使用`.has()`方法

$('li').has('ul').hide();

这与方法1效果相同，但使用了不同的语法。

方法3：使用`.children()`检查

$('li').each(function() {
    if ($(this).children('ul').length > 0) {
        $(this).hide();
    }
});

这种方法更显式地检查每个li元素是否包含ul子元素。

应用场景

创建可折叠的导航菜单
动态过滤树形结构
根据内容条件显示/隐藏列表项

注意事项

隐藏父元素后，其所有子元素也会被隐藏
如果需要保留子元素可见性，可以考虑其他方法如移除父元素或修改样式
隐藏操作是不可逆的，除非使用.show()或.toggle()方法

完整示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2
            <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
            </ul>
        </li>
        <li>Item 3</li>
        <li>Item 4
            <ul>
                <li>Subitem 3</li>
            </ul>
        </li>
    </ul>

    <script>
        $(document).ready(function() {
            // 隐藏所有包含子ul的li元素
            $('#myList li:has(ul)').hide();
            
            // 或者使用.has()方法
            // $('#myList li').has('ul').hide();
        });
    </script>
</body>
</html>

在这个示例中，包含子列表的"Item 2"和"Item 4"会被隐藏，而其他项保持可见。

如何使用jQuery隐藏其子ul-li元素的父li元素？

、、、、

典型的嵌套列表结构。在上面的示例代码中，我只有一个类别--在实际代码中，有很多类别。<ul id="educationList"> <li class="catego

浏览 3提问于2011-03-14得票数 1

回答已采纳

3回答

Cypress调用不执行隐藏元素交互的“显示”方法

、、、、

我有一个情况，我想打开主菜单的子菜单，其中有布局构建使用嵌套的"ul-li“。当鼠标悬停到拥有子女的li (ul-li)时，子菜单将打开，如下所示 <li>/<li> <<

浏览 0提问于2018-07-17得票数 3

回答已采纳

3回答

为什么我的隐藏元素不显示在jquery ()中？

、

我在html中有一些嵌套的项目列表。当用户单击某个元素时，我试图使用jquery来显示子元素。一旦隐藏起来，我就不会让任何元素出现。</li> </ul></ul> 以下

浏览 7提问于2014-07-19得票数 0

回答已采纳

4回答

子元素是否可以隐藏()父元素？

子元素可以隐藏父元素吗？<ul class="parent"></ul>$(".sp").click(function(){ $('.parent

浏览 2提问于2011-05-13得票数 0

回答已采纳

4回答

如果父元素处于隐藏状态，是否可以使子元素可见

、

只是想知道是否有可能用css或jQuery拥有一个隐藏的父元素和一个可见的子元素，var bodyClass = jQuery('body= -1) { jQuery('.nav-container ul.le

浏览 0提问于2011-02-17得票数 5

回答已采纳

4回答

css下拉菜单和javascript

、、、

我有一个用于下拉菜单的html结构： <li><ul>...</ul></li></ul>li ul {display : none;}(这只是基本结构)。当我从菜单中选择一个项目时，我正在用ajax加载一

浏览 1提问于2012-03-06得票数 0

回答已采纳

1回答

隐藏jquery可拖放元素上的Hover内容

、

我有jquery拖放元素，其DOM是：<a href="#">sdasd</a> <div class="content-heading">sdasd</div> <div class=&

浏览 0提问于2013-09-19得票数 0

回答已采纳

1回答

使用JavaScript使子菜单可展开

、、、、

我正在开发一个带有嵌套子菜单的导航菜单。我想知道是否有一种方法可以使菜单在单击父菜单项时可扩展 <ul class="nav nav-pills nav-stacked

浏览 1提问于2017-04-25得票数 1

3回答

只隐藏<li>值，而不隐藏其子值

、、、

<li id="6621">Europe</li></li>如果单击“区域”，只显示“亚洲和欧洲”，并在单击“区域”时隐藏该区域$(document).ready(function() { $("li")

浏览 1提问于2013-02-01得票数 1

1回答

slideUp()，slideDown，显示()和隐藏()没有动画

我在ul-li内部使用了以下代码来制作手风琴： var rr = true; if(rr===true){”或“滑动-向下”正在显示或隐藏内容，

浏览 11提问于2014-04-03得票数 1

1回答

当子进程显示无时隐藏父进程

、

我想创建一些jQuery，当子元素以html格式显示none时隐藏父元素。我的html看起来像这样： <li class="formListBlock payment_mollie_applepay paymentchecked"> <label for="p_method_mollie_applepay" style="display: none;"><

浏览 9提问于2019-06-07得票数 0

2回答

防止嵌套元素触发父元素的事件

、、、、

click) -> .child (has nothing) <div class="child">Child</div>父元素的样式设置为隐藏溢出内容，并在单击时切换其高度。当用户单击时，父元素将展开以显示子元素。我希望用户能够单击子<

浏览 1提问于2013-08-24得票数 12

回答已采纳

3回答

如何只有在单击父级时才有事件，而不是在儿童(两个级别下)时发生事件

、、、

我正在做一个边菜单，当单击父li元素时，该菜单隐藏并显示一个子菜单，我几乎完成了。问题是，如果单击li子菜单(向下两层)，它也会隐藏子菜单。 $( "li</e

浏览 3提问于2017-06-06得票数 0

回答已采纳

2回答

绝对定位顶部属性的子菜单不工作。

、、

我对带有position:absolute;和top:5em;的子菜单有问题。子菜单是隐藏的，直到您悬停在父元素(li元素)上。一切都正常，但是当您悬停在父元素(li元素)上时，会显示子菜单(li > ul元素)，但您不能鼠标超过(访问)它，因为当鼠标离开父(li<em

浏览 3提问于2015-12-06得票数 1

回答已采纳

1回答

如何在分页控件中结合使用PHP和jQuery

、、

首先，我得到了每页记录的页数，并通过页数动态生成<li>链接。如下所示：{} 这很好，但问题是，当页数超过10页时，页码会换到下一行。我想滚动他们点击左右每一次10页。假设我有35页，这将显示所有35页<e

浏览 1提问于2013-01-18得票数 0

3回答

jQuery可折叠UL

、

我正在使用jQuery和超文本标记语言创建一个导航系统。我想要实现的是让父元素在页面加载时可见，而子元素隐藏。我已经做得很简单了。但是，当我在其他父元素之间切换时，我希望能够隐藏以前的子元素，以便一次只能打开一个<ul>。这是我的代码，否则您可能会看到我的<div cl

浏览 0提问于2013-09-16得票数 3

回答已采纳

2回答

在父链接的悬停上显示一个子菜单，然后保持它可见，直到鼠标离开子菜单？

、、、

我有一份这样的菜单： <li class="menu-item"></ul> 默认情况下，.sub-menu元素是隐藏的。我使用以下<e

浏览 0提问于2018-05-23得票数 0

回答已采纳

7回答

当无序列表没有元素时隐藏它

、、、、

我的目的是在#toc中的列表没有元素时隐藏它的文本小部件元素。我正试图用jQuery来解决这个问题，但没有成功。HTML： <div id="toc"> </div>JavaScript： jQuery(

浏览 10提问于2014-03-11得票数 0

3回答

JQuery -如何计算选择器选择的元素数量？

、

我使用$().fadeOut()淡出列表(< li> < /li>)中的项。当列表为空时，我希望隐藏一个父对象。我计划通过签入我的触发器事件来实现这一点，该事件将淡入列表，如果对象的计数为0，则隐藏父元素。如果需要，我可以使用fadeOut回调来删除这些元素。这个问题切中要害：如何选择ul中的<

浏览 68提问于2010-04-22得票数 16

回答已采纳

2回答

Jquery父元素与mouseout上的子元素一起隐藏

我遇到了一个问题，父列表元素随子元素一起隐藏，而我只想让子元素在mouseout上隐藏。下面是我的代码，任何帮助都非常感谢！

浏览 0提问于2011-09-30得票数 0

点击加载更多

如何隐藏使用jQuery隐藏其子ul-li元素的父li元素？

使用jQuery隐藏包含子ul-li元素的父li元素

基础概念

解决方案

方法1：使用:has()选择器

方法2：使用.has()方法

方法3：使用.children()检查

应用场景

注意事项

完整示例

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

方法1：使用`:has()`选择器

方法2：使用`.has()`方法

方法3：使用`.children()`检查