css - 如果 ul 有 ul child ，是否有 CSS 方法添加箭头？

Question

我的导航结构是这样的:

<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>有 child ul.children ？在我上面的示例中，“包含子页面的页面”应该应用向下箭头，“包含另一个子页面的页面”也应应用。

现在我正在使用 jquery 来解决这个问题:

$(function() {
    $('.menu a').each(function() {
        if ( $(this).parent('li').children('ul').size() > 0 ) {
            $(this).append('<span class="dwn">▼</span>');
        }           
    });
});

有没有一种简单的纯 CSS 方法可以做到这一点？

谢谢。

Answer 1

这在 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/