1

我有一个基于引导的<UL> 导航树，其中当前页面路径中的每个<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>

问题是引导程序为所有 li.active 元素添加了边框。而且我只希望边框适用于最深的，即我实际所在的页面。

我不会弄乱引导程序的基础，所以我不会从整个路径中删除活动类。

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

我将如何构建该 JQUERY？

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

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

5 回答 5

4

查找li.active包含另一个.active元素的所有元素并删除边框：

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

http://jsfiddle.net/X8K4E/

于 2013-07-24T09:21:27.710 回答
1

这个：

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

JSFiddle： http: //jsfiddle.net/DDUNE/
或者我不明白你的意思吗？

于 2013-07-24T09:16:43.793 回答
0

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

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

显然，如果我的 li 包含一个 ul，它就不可能是最深的 li.active。

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

li.active.hasSubmenu {border:none}
于 2013-07-24T09:24:31.277 回答
0

我假设它li只能ul作为它的孩子，并且只会li有.active类，并且对于这些假设，这是有效的：

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

演示

于 2013-07-24T09:22:40.030 回答
0

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

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

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

或者你可以用 removeClass('active') 替换 .css('border', 'none')。

此致

于 2013-07-24T09:18:15.820 回答