javascript - 定位包含 ul 的 li

Question

我的导航处于循环的 CMS 中。我想向打开子菜单的 li 添加一个 V 形箭头，但我无法定位它，因为 ul 添加了 if 语句，例如 <% if Children %>。

所以我想通过 css 添加 V 形

a:before {
   font-family: FontAwesome;
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
}

那个 css 样式是什么？它是第三个子菜单，所以我在想一些类似的事情

导航 ul ul > li > ul

^ 我知道这没有任何意义。

因此，请注意该图像中所有 ul ul li 元素如何具有 V 形图案。这就是我的问题。我只希望包含子菜单的 li 获得 V 形。

抱歉，解释有点困惑 - 欢迎所有想法，最好是 css，但如果这是唯一的方法，我可以使用 javascript!

这是我的导航代码(如果有帮助的话)

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

Answer 1

恐怕 CSS 不会在这一点上获胜...CSS 不可能向后遍历(即子元素不能影响其父元素)。

但是，服务器端可以处理此问题...对于每个 li 元素，添加另一个 <% if Children %>陈述。就像这样:

<li class="$LinkingMode" <% if Children %> class="has-child" <% end_if %>  >

然后你上面提到的CSS规则可以修改为目标:li.has-child > a:before {...}