[英]Bootstrap navbar toggle use to add class
I use Bootstrap V3 in Wordpress . 我在Wordpress中使用Bootstrap V3 。
What I want to achieve is that when someone clicks the button
in the collapsed navbar
menu, the div
with the class .slider
gets a extra class. 我要实现的是,当有人单击折叠的navbar
菜单中的button
时,带有.slider
类的div
将获得一个额外的类。
This is the HTML from the navbar : 这是来自导航栏的HTML :
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<?php
wp_nav_menu( array(
'theme_location' => 'navbar-right',
'depth' => 2,
'menu_class' => 'nav navbar-nav navbar-right',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
And this is the HTML from the div
where I want to add a extra class: 这是来自div
的HTML ,我想在其中添加一个额外的类:
<div class="slider">
<div class="container">
<div class="row">
other elements
</div> <!-- close row -->
</div> <!-- close container -->
</div> <!-- close slider -->
I've tried this with CSS : 我已经尝试过CSS :
.navbar-default .navbar-collapse .in ~ .slider{
margin-top: -246px;
padding-top: 176px;
}
And this with jQuery : 而这与jQuery :
$(function() {
$("#navbar").click(function() {
$(".slider").addClass("sliderMove");
});
});
The extra class that should be added on slider is: 应该在滑块上添加的额外类是:
.sliderMove{
margin-top: -246px;
padding-top: 176px;
}
The purpose of this is that the slider that is after/under the navbar
stay's under the navbar
when it collapsed. 这样做的目的是, navbar
之后/下方的滑块在折叠时将保持在navbar
下方。
The button you are are willing to click is having a class navbar-toggle
and the div having navbar has an id navbar
. 您愿意单击的按钮具有一个navbar-toggle
类,而具有navbar的div具有一个id navbar
。 So to achieve the click event on button you have to use the button
id not the div
id. 因此,要实现按钮上的click事件,您必须使用button
ID而不是div
ID。 So your jQuery code will go like: 因此,您的jQuery代码将如下所示:
$('.navbar-toggle').click(function(){
if($('#navbar').hasClass('in')){
$(".slider").addClass("sliderMove");
}else{
$(".slider").removeClass("sliderMove");
}
});
As you would like to remove the class when you collapse the menu again using same button. 正如您想在使用同一按钮再次折叠菜单时删除类一样。
You just need to hook into the Bootstrap collapse event of your collapsible navbar. 您只需要了解可折叠导航栏的Bootstrap崩溃事件即可。 There is no need to assign an extra click handler to the collapse nav button. 无需为折叠导航按钮分配额外的点击处理程序。
Bootstrap's collapse class exposes a few events for hooking into collapse functionality. Bootstrap的折叠类提供了一些事件,可以挂入折叠功能。
Here is an example. 这是一个例子。
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function () { $(".slider").addClass("your-class"); }) $('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function () { $(".slider").removeClass("your-class"); })
.slider { width: 100%; min-height: 100px; background-color: tomato; } .your-class { background-color: lawngreen; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Link <span class="sr-only">(current)</span></a></li> </ul> </div> </div> </nav> <div class="slider"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Try something like this: (as you required when the user clicks the navbar-toggle button, adds a certain class to a certain div with jQuery) 尝试这样的事情:(根据需要,当用户单击导航栏切换按钮时,使用jQuery向特定的div添加特定的类)
$('body').ready(function() {
$('.navbar-toggle').on('click', function() {
$(".slider").toggleClass("sliderMove");
});
});
you were doing everything fine, but you need to use toggleClass()
and select other CSS selector that is not #navbar
您一切都很好,但您需要使用toggleClass()
并选择其他非#navbar
CSS选择器
it also possible to add a delay? 也有可能增加延迟? Because the class is already activated before the navbar is fully collapsed. 因为该类在导航栏完全折叠之前已经被激活。
Yes it is possible, by adding setTimeout()
是的,可以通过添加setTimeout()
$(".collapsed").click(function() { // toggle the class after half second setTimeout(function() { $(".slider").toggleClass("sliderMove"); }, 500); });
/* just to show in small devices */ @media (max-width: 992px) { .sliderMove { background: red; height: 100vh; width: 100% } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> </li> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a> </li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <div class="slider"></div>
Try this 尝试这个
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<div class="slider">
<div class="container">
<div class="row">
other elements
</div> <!-- close row -->
</div> <!-- close container -->
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Javascript Java脚本
$('.navbar-collapse').on('click', function() {
$(".slider").toggleClass("sliderMove");
});
CSS 的CSS
.sliderMove{
height:100%;
width:100%
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.