我添加到我的元素中的类正在被添加，但在删除时没有被删除答案

【问题标题】：The class i m adding to my element is getting added but upon removal is not getting removed我添加到我的元素中的类正在被添加，但在删除时没有被删除
【发布时间】：2016-07-21 22:56:09
【问题描述】：

好的，我的导航栏 HTML 在这里（我正在使用 boostrap Nav）

<header>
 <nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="MyNav">
   <div class="container">
    <div class="navbar-header">
     <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#collapse" aria-expanded="false">
     <span class="sr-only">Toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     </button>
     <a class="navbar-brand" href="#featured"><h1>Wisdom <span class="subhead">Pet Medicine</span></h1></a>
  </div>
  <div class="collapse navbar-collapse" id="collapse">
      <ul  class="nav navbar-nav navbar-right" id="collapse">
          <li class="active"><a href="#featured">Home</a></li>
          <li><a href="#mission">Mission</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#staff">Staff</a></li>
          <li><a href="#testimonials">Testimonials</a></li>
      </ul>
   </div>      
  </div>    
 </nav>
</header>

javascript(JQuery)代码在这里，

$('.navbar-fixed-top').on('activate.bs.scrollspy',function(){    
    var current= $(this).find('#MyNav li .active a').attr('href');
    if(current !== '#featured'){
        $('header nav').addClass('inbody');
    }
    else{
        $('header nav').removeClass('inbody');
    }    
});

现在，问题是，每当我向下滚动到某个部分时，ACTIVE 类都会更改为不同的 li 标签，因此 inbody 类会附加到 <nav> 元素上，紧随 IFCondition .但是当我向上滚动时，inbody 类并没有根据 ELSE 条件被删除。需要帮助。

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

li.active 的选择器中有一个额外的空间

变化：

var current= $(this).find('#MyNav li .active a').attr('href');
                                    ^^ // extra space

到

var current= $(this).find('#MyNav li.active a').attr('href');

您的版本在 <li> 中查找活动类，而不是具有该类的 <li>

【讨论】：

得到了答案。我不得不从 find 方法中删除#MyNav id，它起作用了。我还是很疑惑，为什么会这样？

【解决方案2】：

@charlietfl 说的是正确的。然而，更好的解决方案可能是使用事件目标：

$('.navbar-fixed-top').on('activate.bs.scrollspy',function(ev){
    var current = $(ev.target).find('a').attr('href');
    ...
});

【讨论】：

【解决方案3】：

这行代码有两个问题：

var current= $(this).find('#MyNav li .active a').attr('href');

您的初始选择 $(this) 将是您的导航元素。然后使用 .find() 搜索所有 descendants 导航元素。 #MyNav 不是后代（它是同一个元素），因此 find 函数不会返回任何内容。

第二个问题是“li .active”，它将查找具有活动类的元素，这些元素是 li 元素的后代。但是您需要具有“活动”类的 li 元素。为了做到这一点，不要在它们之间包含空格。

该行应如下所示：

var current= $(this).find('li.active a').attr('href');

【讨论】：

谢谢乔。这是一个很好的解释。