jquery toggleClass 在点击 navbar-toggle 时不切换 css 类
jquery toggleClass does not switch css classes when navbar-toggle is clicked
我正在使用 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
class 切换到用于按钮的 user-actions-off
class,当使用 navbar-toggle
单击时jQuery toggleClass:
<script>
$(".navbar-toggle").click(function(){
$("user-actions-show").toggleClass("user-actions-off");
})
</script>
这就是 class .user-actions-off
的样子:
.user-actions-off{
display:none;
}
但现在的问题是没有解决。
那么我做错了什么?单击 navbar-toggle
时如何正确隐藏这些按钮?
这是navbar-toggle
class:
<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>
您的脚本中缺少 .
。
改变
$("user-actions-show").toggleClass("user-actions-off");
到$(".user-actions-show").toggleClass("user-actions-off");
应该可以解决。
创建一个名为 .hide
的 class 并将其切换到您的 $(".user-actions-show")
;它会覆盖你现有的 CSS 属性 到最新的 CSS 属性.
我正在使用 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
class 切换到用于按钮的 user-actions-off
class,当使用 navbar-toggle
单击时jQuery toggleClass:
<script>
$(".navbar-toggle").click(function(){
$("user-actions-show").toggleClass("user-actions-off");
})
</script>
这就是 class .user-actions-off
的样子:
.user-actions-off{
display:none;
}
但现在的问题是没有解决。
那么我做错了什么?单击 navbar-toggle
时如何正确隐藏这些按钮?
这是navbar-toggle
class:
<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>
您的脚本中缺少 .
。
改变
$("user-actions-show").toggleClass("user-actions-off");
到$(".user-actions-show").toggleClass("user-actions-off");
应该可以解决。
创建一个名为 .hide
的 class 并将其切换到您的 $(".user-actions-show")
;它会覆盖你现有的 CSS 属性 到最新的 CSS 属性.