Javascript 在.click（）函数上删除类时遇到困难

情况：我创建了一个带有点击功能的导航，该功能允许子导航

.slideToggle（）当用户单击导航链接时

问题：当用户单击同级导航链接时，活动类将添加到导航链接中，但不会删除自身。它继续一个接一个地添加活动类

问题：如何正确编写函数，将类添加到已单击的链接，然后在将类添加到当前选定的链接时单击兄弟链接时删除类，等等

JS代码：

// Pillar side navigation function
$('.side-nav-link').click(function(e) {
  var $pillarNav = $('.pillar-subnav')

  $(this).removeClass('side-nav-active');

  if ($pillarNav.is(':visible')) {
    $pillarNav.slideUp();
    $(this).next('ul').stop().slideToggle();
  } else {
    $(this).next('ul').stop().slideToggle();
  }

  $(this).addClass('side-nav-active');

  e.preventDefault()
});

这是一个有效的方法，只需从拥有该类的所有元素中删除该类，然后将其添加到当前元素中，下面是一个更简洁的方法

// Pillar side navigation function
var $allLinks = $('.side-nav-link');
var $allSubnav = $(".pillar-subnav");

$allLinks.click(function(e) {

  e.preventDefault()

  // LINKS
  $allLinks.not(this).removeClass("side-nav-active"); // All
  $(this).toggleClass("side-nav-active");             // Clicked link

  // SUBNAVS
  var $mySubnav = $(this).closest("li").find(".pillar-subnav");
  $allSubnav.not($mySubnav).stop().slideUp();         // All
  $mySubnav.stop().slideToggle();                     // Related subnav

});


$（“.侧导航链接”）。单击（功能（e）{
e、 预防默认值（）
变量$pillarNav=$（'.pillarNav'）
var$subnav=$（this）.next（'.pillar subnav'）.stop（）.slideToggle（）；
var$this=$（this）.toggleClass（'side-nav-active'）；
$（'.side-nav-link'）.not（$this.removeClass（'side-nav-active'）；
$pillarNav.not（$subnav.slideUp（）；
});
.nav{
左侧填充：0；
页边距底部：0；
列表样式：无；
}
.nav>li{
位置：相对位置；
显示：块；
}
.nav>li>a{
位置：相对位置；
显示：块；
填充：10px 15px；
}
.支柱链接>李{
背景色：#f1f1；
边框：实心1px#e3；
填充物：5px；
}
.立柱导航>.侧导航项目>.侧导航链接，
.nav>.side nav item>.nav link{
颜色：#555555；
填充：15px；
}
.subnav支柱{
显示：无；
列表样式：无；
填充：0；
背景色：#f1f1；
边框顶部：1px实心#d0；
}
李国荣先生{
填充：5px0；
边框底部：1px实心#d0；
}
李国章议员{
颜色：#555555；
填充：5px30px；
显示：内联块；
}
.李a：悬停{
文字装饰：无；
颜色：#006a65；
字体大小：粗体；
}
.侧标题{
填充：5px15px；
背景色：#d8d8d8；
边框底部：2px实心#9dc4c3；
边界半径：5px5px0；
}
.侧导航{
背景色：#fff；
边界半径：5px；
盒影：0 0 20px#6e9da3；
宽度：220px；
保证金：20px自动；
}
.侧导航项目{
位置：相对位置；
边框底部：1px实心#d0；
}
.侧导航项目：：之后{
内容：“4”；
字体系列：“webdings”，无衬线；
位置：绝对位置；
右：5px；
顶部：25px；
底部：25px；
}
.侧导航项：最后一个子项：：之后{
顶部：17px；
}
.侧导航项目：最后一个孩子，
李：最后一个孩子{
边框底部：无；
}
.侧导航项目.侧导航链接：悬停，
.侧导航激活，
.侧面导航项目.导航链接：悬停，
.支柱链接>li:悬停{
背景色：#e9e9e9；
左边框：4px实心#006a65；
}










































您可以使用
not（）
和
toggleClass（）

首先从所有内容中删除active，然后仅应用于
$（此）

// Pillar side navigation function
$('.side-nav-link').click(function(e) {
  e.preventDefault()
  var $pillarNav = $('.pillar-subnav')
  $('.side-nav-link').removeClass('side-nav-active');

  $(this).addClass('side-nav-active');

  if ($pillarNav.is(':visible')) {
    $pillarNav.slideUp();
    $(this).next('ul').stop().slideToggle();
  } else {
    $(this).next('ul').stop().slideToggle();
  }
});

这里有一个很好且可读的例子：）


// Pillar side navigation function
var $allLinks = $('.side-nav-link');
var $allSubnav = $(".pillar-subnav");

$allLinks.click(function(e) {

  e.preventDefault()

  // LINKS
  $allLinks.not(this).removeClass("side-nav-active"); // All
  $(this).toggleClass("side-nav-active");             // Clicked link

  // SUBNAVS
  var $mySubnav = $(this).closest("li").find(".pillar-subnav");
  $allSubnav.not($mySubnav).stop().slideUp();         // All
  $mySubnav.stop().slideToggle();                     // Related subnav

});

保持简单，将类切换为$（此）并删除同级：

$（this）.toggleClass（'side-nav-active'）.sides（）.removeClass（'side-nav-active'）
@adeneo这很有趣。我认为你必须用类来调用元素来移除类，但是在这一行中，你调用类来移除它，如果这有意义的话。在过去，我调用了
li
并删除了该类，但它的工作原理与预期一致。