基于类显示隐藏的li [英] Display hidden li based on class

问题描述

我有以下列表结构：

 < 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实现（或两者的混合）。

  解决方案

  您可以使用 .parents（） 或 ：has（） 当页面加载如下：

    $（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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！