在WordPress侧菜单中添加一个子类

Add a class to WordPress side menu only child

本文关键字：一个 子类 添加 WordPress 菜单      更新时间：2023-09-26

我在IE8中挣扎的是我的侧菜单。a:only-child:before适用于我测试过的所有浏览器(Firefox和Chrome和IE9+)，但在IE8中它被忽略。

目标是让a:only-child不显示图像。我的菜单CSS的主要部分如下:

#sidebar li > a:before {
    color: #b70101;
    font-size:13px;
    padding-right:5px;
    content:url(images/bullet-red.png);
}
#sidebar li > a:only-child:before {
    content: " ";
}

菜单是在WordPress中生成的菜单，所以我知道如何添加一个类到没有子菜单项。(我们的目标是那些有孩子的菜单项会显示和箭头，而那些没有的菜单项不会。)

我一直在挣扎，我最近的尝试是使用JavaScript，我认为我没有正确使用，因为它没有添加类。

<script type="text/javascript">
$('.child-sidebar-menu').click(function(){
$(this).children(':not([class])').addClass('no-child')
});
</script>

我也尝试了以下只是添加一个类到父元素，它没有添加添加一个类:

<script type="text/javascript">
$('#sidebar').find('li:has(ul)').addClass('parent');
</script>

任何帮助都将非常感激。我边走边学，衷心感谢您花时间帮助我。

生成的菜单如下所示:

<div id="sidebar">
  <li id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu">
    <ul class="parent-sidebar-menu">
      <li class="page_item page-item-1452 current_page_ancestor has_children"> <a href="">Administrative Services</a>
        <ul class="child-sidebar-menu">
          <li class="page_item page-item-1462 page_item_has_children current_page_ancestor current_page_parent has_children"> <a href="">Information Systems</a>
            <ul class="children">
              <li class="page_item page-item-1878 current_page_item"> <a href="">Service Outages</a> </li>
            </ul>
          </li>
          <li class="page_item page-item-125 page_item_has_children has_children"> <a href="">Addresses</a>
            <ul class="children">
              <li class="page_item page-item-415"> <a href="">General US Address Info</a> </li>
              <li class="page_item page-item-386"> <a href="">People Finder</a> </li>
              <li class="page_item page-item-410"> <a href="">Federal Government</a> </li>
            </ul>
          </li>
          <li class="page_item page-item-497"> <a href="">Administration</a> </li>
          <li class="page_item page-item-451"> <a href="">Useful Links</a></li>
        </ul>
      </li>
    </ul>
  </li>
</div>

我想你接近你的JavaScript尝试。不如试试这个:

<script>
jQuery('#sidebar').find('li').each(function(){
  if ('undefined' != jQuery(this).find('> ul').get(0)) {
    jQuery(this).addClass('parent');
  }
});
</script>

逻辑流程:-在#sidebar中找到所有列表项，循环遍历它们-如果有当前列表项的直接子元素"ul"-添加类"parent"到当前的jQuery对象(它是.each()循环中当前迭代的列表项)

JS小提琴:http://jsfiddle.net/z95LP/

我仍然对如何使用javascript添加类的解决方案感兴趣，如果有人可以指导我的教程，或者如果他们知道如何做，我很乐意学习。在这个例子中，我找到了一个解决方法。

我将样式应用于菜单中生成的类:.has_children

所以我的样式看起来像:

#sidebar .has_children{list-style-image:url(images/bullet-red-down.png);}
相关文章：