如果ul有一个ul孩子,有一个CSS方法添加一个箭头？

我的导航结构看起来像这样：

<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>具有subnavigation儿童的应用一个向下箭头，所以用户知道这个网页有子页面。

是否可能在纯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方式这样做？

谢谢。

解决方法

这是完全可行的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/

如果ul有一个ul孩子,有一个CSS方法添加一个箭头？

解决方法

猜你在找的CSS相关文章