如果 ul 有 ul 孩子，是否有 CSS 方法来添加箭头? [英] Is there a CSS way to add an arrow if a ul has a ul child?

问题描述

我的导航结构如下所示:

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