如果ul有一个ul孩子,是否有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>有孩子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/

Answer 2

你可以这样做:

ul.children:before {
    content:  "?";
}

这是一个例子

这并不是所有浏览器都支持,这里有一个支持列表

编辑

刚刚意识到我上面的例子有缺陷,箭头将处于错误的位置.仍然 - 如果这是一个大道你想要追求的可能性是正确对齐箭头.

Answer 3

老问题，但我会这样做：

\n\n

.menu li > a:not(:only-child):after { content: '\xe2\x96\xbc'; }\n

\n\n

您还可以像这样使它看起来更好：

\n\n

.menu li > a:not(:only-child):after { \n    content: '\\00a0\\00a0\xe2\x96\xbc'; /* add a little spacing so it's not right next to the text */\n    font-size: 0.8rem; /* adjust font size so it looks better */\n    vertical-align: middle; /* vertical align to middle */\n}\n

\n

Answer 4

我认为最好的方法是将一个类（或您正在使用的跨度）添加到li服务器上的那些 s 中。

另一个解决方案，但可能并不容易且不干净，是将箭头添加到所有uls 并仅使它们在 ul.children 中可见（使用 css）。然后，您可以尝试将箭头放置在父 li 的前面或后面。这是否有效将取决于设计。