问题描述
我的导航结构如下所示:
<ul><li><a href="#">第 1 页</a></li><li><a href="#">带有子页面的页面</a><ul class="儿童"><li><a href="#">带有另一个子页面的页面</a><ul class="儿童"><li><a href="#">子子页面</a></li><li><a href="#">第 3 页</a></li><li><a href="#">第 4 页</a></li>
我希望所有具有子导航子项的
是否可以在纯 css 中检测
ul.children
的孩子?在我上面的示例中,带有子页面的页面"应该应用向下箭头和带有另一个子页面的页面".现在我正在使用 jquery 来解决这个问题:
$(function() {$('.menu a').each(function() {if ( $(this).parent('li').children('ul').size() > 0 ) {$(this).append('<span class="dwn">▼</span>');}});});
是否有一种简单的纯 CSS 方法可以做到这一点?
谢谢.
这在 CSS 中完全可行 --
你的结构是这样的:
<li><a href="#">有箭头</a><ul><li><a href="#"></a></li></ul><li><a href="#">没有箭头</a>
你的 CSS 将是这样的 --
//这会为每个链接添加一个箭头.menu li >a:after { 内容: '>';}//当链接是唯一的子链接时,这将删除箭头.menu li >a:only-child:after { 内容: '';}
更进一步,如果你想要一个下拉菜单,其中顶层项目有一个向下的箭头,子菜单有一个向右的箭头,你的 CSS 应该是这样的
//先设置右箭头.menu li >a:after { 内容: '>';}//为顶级项目设置向下箭头.menu >立>一个:在{内容:'v';}//如果a是唯一的孩子,则清除内容.menu li >a:only-child:after {content: '';}
这是一个 jsfiddle 的实际应用 - http://jsfiddle.net/w9xnv/2/
My navigation structure looks like this:
<div class="menu">
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page with Subpages</a>
<ul class="children">
<li><a href="#">Page with another subpage</a>
<ul class="children">
<li><a href="#">subsubpage</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</div>
I want all <li>
's that have a subnavigation children to have a little down-arrow applied so users know this page has subpages.
Is it possible to detect in pure css if a <li>
has children of ul.children
? In my example above, the "Page with Subpages" should have the down arrow applied and the "Page with another subpage" as well.
Right now I'm using jquery to solve this problem:
$(function() {
$('.menu a').each(function() {
if ( $(this).parent('li').children('ul').size() > 0 ) {
$(this).append('<span class="dwn">▼</span>');
}
});
});
Is there an easy pure CSS way to do so?
Thank you.
This is perfectly doable in CSS --
Your structure is this:
<ul class="menu">
<li>
<a href="#">Has arrow</a>
<ul><li><a href="#"></a></li></ul>
</li>
<li>
<a href="#">Has no arrow</a>
</li>
</ul>
Your CSS will be like this --
//this adds an arrow to every link
.menu li > a:after { content: '>'; }
// this removes the arrow when the link is the only child
.menu li > a:only-child:after { content: ''; }
Taking it one step farther, if you want to have a drop down menu where there is a down arrow on the top level items and then right arrows for sub menus, your CSS would look like this
// set up the right arrows first
.menu li > a:after { content: '>'; }
//set up the downward arrow for top level items
.menu > li > a:after {content: 'v'; }
//clear the content if a is only child
.menu li > a:only-child:after {content: ''; }
Here is a jsfiddle of it in action - http://jsfiddle.net/w9xnv/2/
这篇关于如果 ul 有 ul 孩子,是否有 CSS 方法来添加箭头?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!