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

问题描述

我的导航结构如下：

<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>

有可能在纯CSS中检测到一个< li> 有 ul.children 的子级？在我上面的例子中，页面与子页面应该应用向下箭头和与另一个子页面的页面。

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.

现在我使用jquery解决这个问题：

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>');
        }           
    });
});

有一个简单的纯CSS方法吗？

Is there an easy pure CSS way to do so?

谢谢。

推荐答案

这在CSS中是完全可行的 -

This is perfectly doable in 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将是这样 -

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: ''; }   

再往前走一步，如果你想有一个下拉菜单，箭头在顶层项目，然后右箭头为子菜单，您的CSS将看起来像这样

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: ''; }

这里是一个jsfiddle的行动 - http://jsfiddle.net/w9xnv/2/

Here is a jsfiddle of it in action - http://jsfiddle.net/w9xnv/2/

这篇关于如果一个ul有一个ul孩子，有没有CSS方法添加一个箭头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！