2014-07-02 34 views
0

我在挣扎的是我在IE8的菜单。 a:only-child:before适用于我测试过的所有浏览器(Firefox和Chrome和IE9 +),但在IE8中它被忽略。添加一个班级到WordPress的侧边菜单只有孩子

目标是让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> 

回答

0

我仍然有兴趣在如何添加使用JavaScript类,如果任何人都可以直接我教程或如果他们知道该怎么做我很想学习的解决方案。在这种情况下,我找到了解决方法。

我申请一个样式的菜单生成的类:.has_children

所以,我的风格是这样的:

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

这个工程在IE8和所有其他浏览器。

+0

您的JavaScript中添加类的方法是正确的。 jQuery('。some-selector')。addClass('your-class');找到的任何元素都有类广告DED。如果它不工作,那么选择器不会遇到任何基于您的代码的匹配。 – Meogi

1

我觉得你接近你的JavaScript尝试。通过他们 查找#sidebar所有列表项,循环 - - 如果当前列表项的直接子元素“UL” 的 - :也许试试这个来代替:

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

逻辑流程添加类“父”当前jQuery对象(其中,在。每个()循环当前迭代的列表项

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

相关问题