基于类显示隐藏的li

本文介绍了基于类显示隐藏的li的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下列表结构：

 < ul& 
< li>一个< / li> 
< li> Two 
< ul> 
< li class =active>两个1< / li> 
< li> Two-2< / li> 
< / ul> 
< / li> 
< li> Three 
< ul> 
< li> Three-1< / li> 
< / ul> 
< / li> 
< / ul>

使用以下CSS：

  ul li ul {
 display：none; 
} 
 ul li：hover ul {
 display：block; 
}

我想要的是：
当li类

因此，在提供的情况下，将显示以下内容以及顶层：

一个

两个
- 两个
- 三个
如果可能的话，我想要一个CSS或jQuery实现（或两者的混合）。
解决方案
您可以使用或当页面加载如下：
```
  $（function（）{
 $ （'.active'）。parents（）。show（）; 
 //或.. 
 $（'：has（.active）'）。 （）; 
}）; 
  
```
这些工作任何数量级别的深度，第一次会有点快。 p>
I have the following list structure:
```
<ul>
    <li>One</li>
    <li>Two
        <ul>
             <li class="active">Two-1</li>
             <li>Two-2</li>
        </ul>
    </li>
    <li>Three
        <ul>
            <li>Three-1</li>
        </ul>
    </li>
</ul>
```
with the following CSS:
```
ul li ul{
    display:none;
}
ul li:hover ul{
    display:block;
}
```
What I would like is this:When an li class is active, the entire structure down until the active class gets displayed.
so in the case provided the following would show, along with the top level:
- One
- Two
  - Two-1
  - Two-2
- Three
I'd like either a CSS or jQuery implementation (or mixture of the two) if possible.
解决方案
You can show the active's parents using .parents() or :has() when the page loads like this:
```
$(function() {
  $('.active').parents().show();
  //or..
  $(':has(.active)').show();
});
```
Either of these work any number of levels deep, the first would be a bit faster though.

这篇关于基于类显示隐藏的li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Active

基于类显示隐藏的li

问题描述