【问题标题】：Is there a CSS way to add an arrow if a ul has a ul child?如果 ul 有 ul 孩子，是否有 CSS 方法来添加箭头？
【发布时间】：2011-07-13 23:39:03
【问题描述】：

我的导航结构如下所示：

<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> 都应用一个小向下箭头，以便用户知道此页面有子页面。

如果<li> 有ul.children 的孩子，是否可以在纯css 中检测？在我上面的示例中，“带有子页面的页面”应该应用向下箭头，“带有另一个子页面的页面”也是如此。

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

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

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

谢谢。

【问题讨论】：

标签： css drop-down-menu

【解决方案1】：

我认为最好的方法是向服务器上的 lis 添加一个类（或您正在使用的跨度）。

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

【讨论】：

【解决方案2】：

您可以这样做：

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

这里是an example

这个并非所有浏览器都支持，here is a list of support

编辑

刚刚意识到我上面的例子会有缺陷，箭头会在错误的位置。仍然 - 如果这是您想要追求的途径，是否可以正确对齐箭头。

【讨论】：

【解决方案3】：

没有 CSS '父选择器'。

但这里有一个较短的 jquery 代码：

$('.children').prev('li').append('<span class="dwn">▼</span>');

您的问题与此类似：

Complex CSS selector for parent of active child

【讨论】：

【解决方案4】：

对于垂直菜单：这个js，适用于所有= nav.vertical li

$("nav.vertical li:has(ul)").find("a:first").append('<img src="" alt="" class="">');

<nav>
   <ul>
     <li><a href="">Page</a>
         <ul class="children">
           <li><a href="">Post</a></li>
         </ul>
     </li>
   </ul>
</nav>

【讨论】：

【解决方案5】：

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

【讨论】：

是独生子女 CSS2 还是 CSS3？
IE 支持 9 及以上版本仅适用于选择器 :only-child fyi
@crush，独生子女是 CSS3 iirc。
如果它是only-child，而不是覆盖元素内容，这样做会不会更好/更有效：a:not(:only-child):after？
如此干净，如此优雅，真希望我在浪费几天前看到这个。

【解决方案6】：

例如

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

和 CSS

.menu li a span {
display: -moz-inline-stack;
display: inline-block;  
zoom: 1;
*display: inline;
vertical-align: middle;
background: url(arrow.png) 0 0 no-repeat;
width: 5px;
height: 3px;
margin-left: 5px;

【讨论】：

【解决方案7】：

为了简单起见，这里是我喜欢使用的解决方案：

在作为下拉菜单的项目名称周围放置标签。

<div class="menu">
    <ul>
        <li><a href="#"><span>Page with Subpages</span></a>
            <ul class="children">
                <li><a href="#"><span>Page with another subpage</span></a>
                    <ul class="children">
                        <li><a href="#">subsubpage</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

使用 CSS 添加箭头：

#menu span:after /* DropDown Arrow */
{
   border: 0.313em solid transparent; /* 5 pixels wide */
   border-bottom: none;  /* helps the drop-down arrow stay in the vertical centre of the parent */
   border-top-color: #cfcfcf;   /* colour of the drop-down arrow */
   content: ''; /* content of the arrow, you want to keep this empty */
   vertical-align: middle;
   display: inline-block;
   position: relative;
   right: -0.313em; /* 5 pixels right of the menu text*/
}

希望这对你有用！我相信这是我遇到的最简单的方法！

【讨论】：

【解决方案8】：

为未来的读者！我也想知道，然后自己想通了

我们无法检查元素是否有子元素，但我们可以检查它是否为空

li:not(:emtpy):after {
    content: "V";
    color: black;
    position: relative;
    left: 120%;
    /* Well those styles are not best but you get the idea */
}

【讨论】：

【解决方案9】：

老问题，但我会这样做：

.menu li > a:not(:only-child):after { content: '▼'; }

你也可以像这样让它看起来更漂亮：

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

【讨论】：

这对我很有用。不过，我将三角形向右浮动：.menu li > a:not(:only-child):after { content: '▼'; float: right; }
嗯，它几乎奏效了。只需要更换箭头，因为 Firefox 有问题。可能是我使用它的页面上的字符编码。

【解决方案10】：

这只是rotaerczs 答案的改进。在CSS Tricks的帮助下

#cssmenu li > a:not(:only-child)::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    float: right;
}

【讨论】：

【解决方案11】：

对于 Wordpress，请使用以下内容

<?php
/**
* Add arrows to menu items
* @author Bill Erickson
* @link http://www.billerickson.net/code/add-arrows-to-menu-items/
* 
* @param string $item_output, HTML output for the menu item
* @param object $item, menu item object
* @param int $depth, depth in menu structure
* @param object $args, arguments passed to wp_nav_menu()
* @return string $item_output
*/
function be_arrows_in_menus( $item_output, $item, $depth, $args ) {
if( in_array( 'menu-item-has-children', $item->classes ) ) {
    $arrow = 0 == $depth ? '<i class="icon-angle-down"></i>' : '<i class="icon-angle-right"></i>';
    $item_output = str_replace( '</a>', $arrow . '</a>', $item_output );
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'be_arrows_in_menus', 10, 4 );

感谢https://www.billerickson.net/code/add-arrows-to-menu-items/

【讨论】：