Javascript 如何从html中删除类

因此，我试图在单击时检测我的导航元素是否有某个类，如果有，则删除它，如果没有，则添加它

这背后的方法是在下拉按钮打开时在下拉按钮上显示活动状态。一旦单击了另一个导航元素或单击了下拉菜单之外的内容，就会释放该状态。这种逻辑目前运行良好

然而，另一种情况是，如果单击了同一个按钮，就会失去活动状态，这目前不起作用。if语句中的第一个条件永远不会命中，因此类始终处于切换状态

JS:

css:

HTML:

---

据我所知，if语句根本不是必需的。

---

根据jQuery文档

toggleClass

已经为您完成了这项工作。你只需要使用

，toggleClass（）

Toggle类就会查看它是否存在，如果存在则删除，如果不存在则添加。您的最后一个案例应该如下所示：

$('.link').click(function() {
  $(this).toggleClass('activeLink');
}

---

以上代码就是使用jQuery检查和切换类所需的全部代码。：）

无需在

toggleClass（）

周围添加

hasglass

逻辑，因为这就是

toggleClass（className）

为您所做的

• 如果

  className

  不存在，是否存在与

  addClass（className）

  等效的
• 等效于

  removeClass（className）

  的

此处参考：

---

试试这个：

链接1
链接2

$（'.link'）。单击（函数（）{
$（this.toggleClass（'activeLink'）；
});
//点击链接1：
//链接1
//点击链接2：
//链接2

这里的关键字是事件传播，因此每次单击链接也是对文档的单击，因为

。link

是

文档的子项

下面的代码应该可以做到这一点。如果单击链接，它将切换类；如果单击链接以外的任何内容，它将始终删除该类


$（文档）.ready（函数（）{
$（“#FlatropingDropdown”）。单击（函数（事件）{
$（this.toggleClass（'activeLink'）；
});
$（文档）。单击（函数（事件）{
if（！$（event.target）.closest（“#FlatRoof下拉列表”）.length{
$（“#FlatropingDropdown”）.removeClass（'activeLink'）；
}
});
});
.activeLink{
背景色：#31A7DF；
}
这似乎解决了我的问题

    $(document).ready(function () {
    $(document).click(function (e) {
        $('.link.activeLink').removeClass('activeLink')
    });

    $('.link').click(function (e) {
        if ($(e.target).hasClass('activeLink')) {
            $(this).removeClass('activeLink');
        } else {
            $('.link.activeLink').removeClass('activeLink')
            $(this).toggleClass('activeLink');
        }         
    });
});

嘿，好吧，如果我删除我的第二条语句，这就行了。但是，如果我添加了这个逻辑，并且没有删除任何内容，那么这个链接不会删除这个类。似乎有什么东西干扰了其他东西。你能说得更具体些吗？我相信我们能帮你修好
  <a class="nav-link link dropdown-toggle text-white paddingRightButton h-100 noPaddingRightLeft" href="#" data-toggle="dropdown" id="flatRoofingDropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            Flat Roofing
                        </a>

$('.link').click(function() {
  $(this).toggleClass('activeLink');
}

    $(document).ready(function () {
    $(document).click(function (e) {
        $('.link.activeLink').removeClass('activeLink')
    });

    $('.link').click(function (e) {
        if ($(e.target).hasClass('activeLink')) {
            $(this).removeClass('activeLink');
        } else {
            $('.link.activeLink').removeClass('activeLink')
            $(this).toggleClass('activeLink');
        }         
    });
});