如果 ul 有 ul 子级，是否有 CSS 方法来添加箭头？

发布于 2024-10-21 10:00:11 字数 1292 浏览 2 评论 0原文

我的导航结构如下所示：

<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>

我希望所有具有子导航子项的

都应用一个小向下箭头，以便用户知道该页面有子页面。

是否可以在纯 CSS 中检测

是否具有 ul.children 的子级？在上面的示例中，“带有子页面的页面”应该应用向下箭头，并且“带有另一个子页面的页面”也应该应用。

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

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

Is there a simple pure CSS way to do so?

谢谢。

原文

My navigation structure looks like this:

<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>

I want all <li>'s that have a subnavigation children to have a little down-arrow applied so users know this page has subpages.

Is it possible to detect in pure css if a <li> has children of ul.children? In my example above, the "Page with Subpages" should have the down arrow applied and the "Page with another subpage" as well.

Right now I'm using jquery to solve this problem:

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

Is there an easy pure CSS way to do so?

Thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧故 2024-10-28 10:00:11

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

This is perfectly doable in CSS --

Your structure is this:

 <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>

Your CSS will be like this --

   //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: ''; }

Taking it one step farther, if you want to have a drop down menu where there is a down arrow on the top level items and then right arrows for sub menus, your CSS would look like this

   // 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: ''; }

Here is a jsfiddle of it in action - http://jsfiddle.net/w9xnv/2/

回复收藏 0 原文

凡间太子 2024-10-28 10:00:11

你可以这样做：

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

这是一个示例

这个没有所有浏览器都支持，这里是支持列表

编辑< /strong>

刚刚意识到我上面的例子会有缺陷，箭头将位于错误的位置。不过，如果这是您想要追求的途径，则可以正确对齐箭头。

You could do this:

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

here is an example

This doesn't have support in all browsers, here is a list of support

EDIT

Just realised that my example above will be flawed, the arrow will be in the wrong position. Still - if this is an avenue you would like to pursue the possibility is there to align the arrow correctly.

回复收藏 0 原文

魄砕の薆 2024-10-28 10:00:11

老问题，但这就是我要做的：

.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 */
}

Old question but this is how I would do it:

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

You can also make it look nicer like this:

.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 */
}

回复收藏 0 原文

猥︴琐丶欲为 2024-10-28 10:00:11

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

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

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

For future readers! I was wondering too and then figured it out on my own

we can't check if element has children, but we can check if it is empty

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

回复收藏 0 原文

淡淡の花香 2024-10-28 10:00:11

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

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

回复收藏 0 原文

揽月 2024-10-28 10:00:11

为了保持简单，这是我喜欢使用的解决方案：

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


    
        包含子页面的页面
            
                包含另一个子页面的页面
                    
                        子子页面

使用 CSS 添加箭头：

#menu span:after /* 下拉箭头 */
{
   边框：0.313em实心透明； /* 5 像素宽 */
   底部边框：无； /* 帮助下拉箭头保持在父级的垂直中心 */
   顶部边框颜色：#cfcfcf； /* 下拉箭头的颜色 */
   内容： ''; /* 箭头的内容，你想将其保留为空 */
   垂直对齐：居中；
   显示：内联块；
   位置：相对；
   右：-0.313em； /* 菜单文本右侧 5 像素*/
}

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

In the interests of keeping it simple, here is the solution I like to use:

Place tags around the name of the item acting as a drop-down menu.

<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>

Add the arrow using 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*/
}

Hope this works for you! I believe it to be the simplest method I've come across!

回复收藏 0 原文

呢古 2024-10-28 10:00:11

没有 CSS“父选择器”。

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

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

您的问题与此类似：

活动子级父级的复杂 CSS 选择器

There is no CSS 'parent selector'.

But here is a shorter jquery code:

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

Your question is similar to this one:

Complex CSS selector for parent of active child

回复收藏 0 原文

痴情换悲伤 2024-10-28 10:00:11

对于垂直菜单：
这个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>

For vertical menu :
this js, Works on all = 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>

回复收藏 0 原文

陌上芳菲 2024-10-28 10:00:11

例如

$(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;

For example

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

and the 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;

回复收藏 0 原文

夏末染殇 2024-10-28 10:00:11

这只是 rotaercz 答案的改进。在 CSS 技巧的帮助下

#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;
}

This is just a refinement of rotaerczs answer. With help from 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;
}

回复收藏 0 原文

冬天的雪花 2024-10-28 10:00: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/

For Wordpress Please Use the Following

<?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 );

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

回复收藏 0 原文

~没有更多了~