我有这个 left side bar
,我想要的是当在它外面点击时关闭 side nav
。
我的 side nav
javascript 代码
//side-nav is the class of my side nav
//leftmenutrigger is my button on nav bar the toggles the side nav
任何建议都可以。甚至 javascript 或 css 也只是为了隐藏我的侧导航栏。
我的导航栏和左侧导航条码
$( document ).ready(function() {
$('.leftmenutrigger').on('click', function(e) {
$('.side-nav').toggleClass("open");
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar header-top sticky-top navbar-expand-lg navbar-light bg-light" >
<span class="navbar-toggler-icon leftmenutrigger"></span> <!--THIS IS THE BUTTON THAT TOGGLES-->
<a class="navbar-brand" href="#">
<img src="images/nexuslogo.png" style="width: 40px; height: 40px;padding: 0px; margin: 0px;">
</a>
<a class="navbar-brand" id="comp_name" name="comp_name"> Nexus Technologies, Inc.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" ></span> </button>
<div class="collapse navbar-collapse" id="navbarText" name="navbarText" > //SIDE NAV BAR ITEMS
<ul class="navbar-nav animate side-nav ">
<li class="nav-item">
<a href="" id="addUser" name="addUser" style="width: 100%">
<i class="fa fa-plus-circle"></i> Add User
</a>
<a href="manageprize.php" id="manage_prize" name="manage_prize" style="width: 100%" target="_self">
<i class="fa fa-table"></i> Manage Prizes
</a>
</li>
</ul>
</div>
</nav>
谢谢!!!!!!
最佳答案
使用 onclick
window
并删除类 show
(如果存在)..
同时使用 onclick
导航来防止折叠
$(window).click(function(e) {
if($(".navbar-collapse").hasClass("show")){
$('.navbar-collapse').removeClass("show");
e.preventDefault();
}
});
$('.navbar-collapse').click(function(event){
event.stopPropagation();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<nav class="navbar header-top sticky-top navbar-expand-lg navbar-light bg-light" >
<span class="navbar-toggler-icon leftmenutrigger"></span> <!--THIS IS THE BUTTON THAT TOGGLES-->
<a class="navbar-brand" href="#">
<img src="images/nexuslogo.png" style="width: 40px; height: 40px;padding: 0px; margin: 0px;">
</a>
<a class="navbar-brand" id="comp_name" name="comp_name"> Nexus Technologies, Inc.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" ></span> </button>
<div class="collapse navbar-collapse" id="navbarText" name="navbarText" > //SIDE NAV BAR ITEMS
<ul class="navbar-nav animate side-nav ">
<li class="nav-item">
<a href="" id="addUser" name="addUser" style="width: 100%">
<i class="fa fa-plus-circle"></i> Add User
</a>
<a href="manageprize.php" id="manage_prize" name="manage_prize" style="width: 100%" target="_self">
<i class="fa fa-table"></i> Manage Prizes
</a>
</li>
</ul>
</div>
</nav>
关于javascript - 在其外部单击时隐藏 Bootstrap 侧导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53589577/