[英]Target the li that contains a ul
I have my nav in a loop for a CMS. 我的CMS导航有一个导航。 I want to add a chevron arrow to the li that opens a submenu, but im having trouble targeting it, because the ul is added with an if statement eg <% if Children %>.
我想在打开子菜单的li中添加一个V形箭头,但是我很难定位它,因为ul添加了if语句,例如<%if Children%>。
So I want to add the chevron via css 所以我想通过css添加雪佛龙
a:before {
font-family: FontAwesome;
content: "\f095";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}
What would that css style be? CSS样式是什么? its for the third sub menu so I was thinking something along the lines of
它是第三个子菜单,所以我在思考一些事情
nav ul ul > li > ul 导航ul ul> li> ul
^ Im aware that makes no sense. ^我意识到这没有任何意义。
So in that image notice how all the ul ul li elements have a chevron. 因此,在该图像中注意所有ul ul li元素如何具有V形符号。 thats my issue.
这就是我的问题。 I only want the li that contains a submenu to get a cheveron.
我只想要包含子菜单的li来获得一个cheveron。
Sorry the explanations a bit messy - all ideas welcome, prefferably css, but i can work in javascript if its the only way to go! 对不起,解释有点混乱-欢迎所有想法,大概是CSS,但是如果它是唯一的方法,我可以使用javascript工作!
this is my navigation code if it helps 这是我的导航代码,如果有帮助
<div class="navigation-container">
<ul>
<% control Menu(1) %>
<li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle </a>
<% if Children %>
<ul>
<% control Children %>
<li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle </a>
<% if Children %>
<ul>
<% control Children %>
<li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle</a>
<% if Children %>
<ul>
<% control Children %>
<li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle</a>
<% if Children %>
<ul>
<% control Children %>
<li class="$LinkingMode"><a href="$Link" title="$Title" <% if RedirectionType = External || RedirectionType = RDFileTitle %>target="_blank"<% end_if %>>$MenuTitle</a>
<% end_control %>
</ul>
<% end_if %>
</li>
<% end_control %>
</ul>
<% end_if %>
</li>
<% end_control %>
</ul>
<% end_if %>
</li>
<% end_control %>
</ul>
<% end_if %>
</li>
<% end_control %>
</ul>
<div style="clear:both"></div>
<div style="clear:both"></div>
</div>
I'm afraid CSS won't be taking home a win on this one... It's impossible for CSS to traverse backwards (that is, a child element cannot affect it's parent). 我担心CSS不会在这个上获胜... CSS不可能向后遍历(也就是说,子元素不能影响它的父元素)。
It is however, possible for the server side to handle this... For each one of your li elements, add another <% if Children %>
statement. 但是,服务器端可以处理此问题...对于每个li元素,添加另一个
<% if Children %>
语句。 Like so: 像这样:
<li class="$LinkingMode" <% if Children %> class="has-child" <% end_if %> >
Then your above mentioned css rule could be modified to target: li.has-child > a:before {...}
然后,您可以将上述的CSS规则修改为目标:
li.has-child > a:before {...}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.