本文介绍了基于类显示隐藏的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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
-