使用 jQuery 在 nav-pills 上激活类

Question

我正在开发一个网站，正在使用带有 bootstrap 4 的 nav-pills 设置。我想为我拥有的两个链接添加一个活动状态，这两个链接使用手风琴将内容放入视图中。我正在使用以下 jQuery：

$(function () {
$("#filtermenu li a").click(function () {
    $("#filtermenu li a.active").removeClass("active");
    $(this).addClass("active");
});
});

这在单击和切换时效果很好，具体取决于您单击的选项卡，但它始终在其中一个链接上保持活动状态，这意味着您无法摆脱活动类。

Answer 1

你总是添加“活动”类，并且你总是得到一个活动元素， 如果我理解正确的话，您想通过单击已经“活动”的元素来关闭下拉菜单。所以

$(function () {
  $("#filtermenu li a").click(function () {
    if($(this).hasClass('active')) {
      $(this).removeClass("active");
    } else {
      $("#filtermenu li a.active").removeClass("active");
      $(this).addClass("active");
    }
  });
});

Answer 2

@meisam 这很好，但是你必须删除 $(this).removeClass("active");因为如果是同一个李。它将删除活动类别，如果您单击的是同一个药丸，则删除活动类别是没有意义的。