如果 ul 有 ul 孩子，是否有 CSS 方法来添加箭头？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5281556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a CSS way to add an arrow if a ul has a ul child?
提问by matt
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.
我希望所有<li>具有子导航子项的 s 应用一个小的向下箭头，以便用户知道此页面有子页面。
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.
是否可以在纯 css 中检测 a<li>是否有孩子ul.children？在我上面的示例中，“带有子页面的页面”应该应用向下箭头和“带有另一个子页面的页面”。
Right now I'm using jquery to solve this problem:
现在我正在使用 jquery 来解决这个问题：
$(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?
有没有一种简单的纯 CSS 方法可以做到这一点？
Thank you.
谢谢你。
回答by David
This is perfectly doable in CSS --
这在 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 --
你的 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: ''; }
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
更进一步，如果您想要一个下拉菜单，其中顶级项目有一个向下箭头，然后是子菜单的向右箭头，您的 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: ''; }
Here is a jsfiddle of it in action - http://jsfiddle.net/w9xnv/2/
这是它的 jsfiddle 实际操作 - http://jsfiddle.net/w9xnv/2/
回答by Stuart Burrows
You coulddo 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.
刚刚意识到我上面的例子会有缺陷，箭头会在错误的位置。仍然 - 如果这是您想要追求的途径，则可以正确对齐箭头。
回答by rotaercz
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: '<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>
a0#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*/
}
a0▼'; /* 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 */
}
回答by GolezTrol
I think the best way would be to add a class (or that span you're using) to those lis on the server.
我认为最好的方法是向li服务器上的 s添加一个类（或您正在使用的跨度）。
Another solution, but probably not easy and not clean, is to add the arrow to all uls and only make them visible (using css) in ul.children. You can then try to position the arrow in front of or behind the parent li. Whether this will work will depend on the design.
另一个解决方案，但可能并不容易且不干净，是将箭头添加到所有uls 并仅使它们在 ul.children 中可见（使用 css）。然后，您可以尝试将箭头放置在父 li 的前面或后面。这是否有效将取决于设计。
回答by Arcanewinds
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*/ }
在项目名称周围放置标签作为下拉菜单。
li:not(:emtpy):after { content: "V"; color: black; position: relative; left: 120%; /* Well those styles are not best but you get the idea */ }使用 CSS 添加箭头：
$(function() { $('.menu a').each(function() { if ( $(this).parent('li').children('ul').size() > 0 ) { $(this).append('<span></span>'); } }); });
Hope this works for you! I believe it to be the simplest method I've come across!
希望这对你有用！我相信这是我遇到的最简单的方法！
回答by Arcanewinds
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
我们无法检查元素是否有子元素，但我们可以检查它是否为空
.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;
回答by Cristopher
For example
例如
$('.children').prev('li').append('<span class="dwn">▼</span>');
and the CSS
和 CSS
$("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>
回答by ngduc
There is no CSS 'parent selector'.
没有 CSS '父选择器'。
But here is a shorter jquery code:
但这是一个较短的 jquery 代码：
#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;
}
Your question is similar to this one:
你的问题类似于这个：
回答by Farzin Seyfollahi
For vertical menu : this js, Works on all = nav.vertical li
对于垂直菜单：这个js，适用于所有= nav.vertical li
##代码##回答by TecBrat
This is just a refinement of rotaerczs answer. With help from CSS Tricks
这只是对rotaercz的回答的改进。在CSS Tricks 的帮助下
##代码##