单击导航栏切换时，jquery toggleClass 不会切换 css 类答案

【问题标题】：jquery toggleClass does not switch css classes when navbar-toggle is clicked单击导航栏切换时，jquery toggleClass 不会切换 css 类
【发布时间】：2022-01-01 06:06:45
【问题描述】：

我正在使用 Bootstrap 3，我有一个这样的 div：

<div class="col-xs-12 col-sm-1 col-md-1 col-lg-2 login-form" style="margin-top:35px !important">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <button type="button" class="btn btn-info btn-lg btn-block user-actions user-actions-show">Login</button>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <button type="button" class="btn btn-secondary btn-lg btn-block user-actions user-actions-show" style="margin-top:5px;">Register</button>
        </div>
    </div>
</div>

现在我想从user-actions-show 类切换到用于按钮的user-actions-off 类，当使用jQuery toggleClass 单击navbar-toggle 时：

<script>
        $(".navbar-toggle").click(function(){
            $("user-actions-show").toggleClass("user-actions-off");
        })
</script>

这就是 .user-actions-off 类的样子：

.user-actions-off{
     display:none;
}

但现在的问题是它没有成功。

那么我在这里做错了什么？单击navbar-toggle 时如何正确隐藏这些按钮？

这是navbar-toggle 类：

<button class="navbar-toggler navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

【问题讨论】：

哪个元素有这个.navbar-toggle类？
@kiner_shah 对不起，我忘了添加它，请检查 UPDATE

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

【解决方案1】：

您的脚本中缺少.。

改变 $("user-actions-show").toggleClass("user-actions-off");

致$(".user-actions-show").toggleClass("user-actions-off");

应该可以解决的。

【讨论】：

【解决方案2】：

创建一个名为.hide 的类并将其切换到您的$(".user-actions-show")；它会将您现有的 CSS 属性覆盖为最新的 CSS 属性。

【讨论】：