我的导航结构看起来像这样:
<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>
我想让所有< li>具有subnavigation儿童的应用一个向下箭头,所以用户知道这个网页有子页面。
是否可能在纯css中检测是否< li>有孩子的ul.children?在上面的示例中,“带子网页的页面”应该应用向下箭头,以及“具有另一个子页面的页面”。
现在我使用jquery来解决这个问题:
$(function() { $('.menu a').each(function() { if ( $(this).parent('li').children('ul').size() > 0 ) { $(this).append('<span class="dwn">▼</span>'); } }); });
有没有简单的纯CSS方式这样做?
谢谢。
解决方法
这是完全可行的CSS –
你的结构是这样的:
<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>
你的CSS将是这样 –
//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: ''; }
再往前走一步,如果你想有一个下拉菜单,其中有一个向下箭头的顶层项目,然后右箭头的子菜单,你的CSS将看起来像这样
// 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: ''; }
这是一个jsfiddle它的行动 – http://jsfiddle.net/w9xnv/2/