我的导航结构看起来像这样：
@H_502_2@<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来解决这个问题：
@H_502_2@$(function() { $('.menu a').each(function() { if ( $(this).parent('li').children('ul').size() > 0 ) { $(this).append('<span class="dwn">▼</span>'); } }); });有没有简单的纯CSS方式这样做？
谢谢。
解决方法
这是完全可行的CSS –
你的结构是这样的：
@H_502_2@<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将是这样 –
@H_502_2@//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将看起来像这样
@H_502_2@// 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/
