Question

我有一个基于bootstrap的＆lt; UL>导航树每个＆lt; LI>在当前页面的路径中给出“活动”类。因此，如果我在主页下面的两个页面上，代码将大致如下：

<ul>
  <li>Link1</li>
  <li>Link2</li>
  <li class='active'>Link3
    <ul>
      <li>sublink1</li>
      <li class=active>sublink2
        <ul>
          <li>subsublink1</li>
          <li class=active>subsublink2 THIS IS MY PAGE</li>
        </ul>
      </li>
    </ul>
  </li>

问题是bootstrap为所有li.active元素添加了边框。我只希望边框适用于最深的边框，即我实际上的页面。

我不会搞乱引导基础，所以我不打算从整个路径中删除活动类。

我的目标是让jQuery删除不需要的边框。我想找到任何没有li.active儿童的li.active，这表明它是路径中最深的li.active。然后用li.active找到它的所有父母，并从中删除边框。

我如何构建那个JQUERY？

我在想这样的事情（知道notHasClass不存在）：

$('li.active').children().notHasClass('active').parents.hasClass('active').css('border','none');

Answer 1

查找包含其他li.active元素的所有.active元素并删除边框：

$('li.active:has(.active)').css({ border : 'none' });

http://jsfiddle.net/X8K4E/

Answer 2

此：

$("li.active").each(function(){
    if($(this).find("li.active").length>0){
        $(this).css("border","none");
    }
})

JSFiddle：http://jsfiddle.net/DDUNE/
或者我不明白你的权利？

Answer 3

使用：last你得到DOM中的最后一个元素。因此，您可以通过li.active获取父母并删除边框。

$('li.active:last').parents('li.active').css('border', 'none');

查看示例： http://jsfiddle.net/kmgUh/

或者你可以用removeClass（'active'）替换.css（'border'，'none'）。

祝你好运

Answer 4

我假设li只有ul作为其子级，并且li只有.active类，并且对于这些假设，这有效：

$('li.active').filter( function () {
    if ( $(this).children('ul').length === 0 )
        return true;
    return false;
}).parents('li').removeClass('active');

DEMO

Answer 5

找到了一种稍微不同的方法来实现它：

$('li.active').has('ul').addClass('hasSubmenu');

显然，如果我的李含有ul，它就不能是最深的li.active。

所以现在我可以使用纯css来摆脱边界：

li.active.hasSubmenu {border:none}

仅将“活跃”课程分配给最深的孩子

5 个答案:

DEMO