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

前端之家收集整理的这篇文章主要介绍了如果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/

原文链接:https://www.f2er.com/css/220575.html

猜你在找的CSS相关文章