javascript - 当我单击 NavBar 按钮时它会出现,但是当我再次单击它时它不会消失
问题描述
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.6)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.body.style.backgroundColor = "white";
}
$(document).on('click', function(e) {
if ( $(e.target).closest('#sideNavButton').length ) {
$("#mySidenav").show();
}else if ( ! $(e.target).closest('#mySidenav').length ) {
$('#mySidenav').hide(); document.body.style.backgroundColor = "white";
}
});
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 20px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#" class="active">HOME</a>
<a href="#">MEN</a>
<a href="#">WOMEN</a>
<a href="#">ABOUT</a>
<a href="#">CONTACT</a>
</div>
侧面导航栏可以在单击按钮时打开,一旦侧面导航栏打开,它可以通过单击页面上的任何位置关闭,但不能通过单击打开按钮关闭,我希望它也可以在单击打开按钮和任何地方关闭也出现在屏幕上。我完整的 HTML、CSS、jquery 和 javascript 代码在这里。我所做的?
解决方案
请试试这个:
HTML:-
<div class="sidenav">
<a href="javascript:void(0)" class="openbtn">Open</a>
<div id="mySidenav">
<a href="#" class="active">HOME</a>
<a href="#">MEN</a>
<a href="#">WOMEN</a>
<a href="#">ABOUT</a>
<a href="#">CONTACT</a>
</div>
</div>
CSS:-
#mySidenav {
height: 100%;
width: 0px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #fff;
overflow: hidden;
padding-top: 60px;
transition: width 250ms;
-webkit-transition: width 250ms;
}
#mySidenav.show{
width: 250px;
}
.sidenav a {
padding: 20px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn{
z-index: 3;
position:relative;
}
JS:-
$(document).ready(function(e) {
$('.openbtn').click(function(e) {
e.preventDefault();
$(this).toggleClass('active');
if($(this).hasClass('active')){
$(this).html('Close');
$('#mySidenav').addClass('show');
}else{
$(this).html('Open');
$('#mySidenav').removeClass('show');
}
});
$(document).on('click', function(e) {
var $trigger = $(".sidenav");
if($trigger !== event.target && !$trigger.has(event.target).length){
$('.openbtn').removeClass('active').html('Open');
$('#mySidenav').removeClass('show');
}
});
});
推荐阅读
- c# - 在 wpf 中为 listviewitem 创建子项
- javascript - 我如何撤消子字符串(例如将文本恢复到正常长度)
- c++ - 如何创建一个while循环,继续循环,直到在C++中“使用流”输入一个键?
- vue.js - 随着当前选定行的变化,如何在 el-table 中实用地滚动?元素.io
- python - Python - 导入后无法识别 Flask
- php - 从作曲家包中找不到php类
- flutter - Flutter - 本地通知在发布模式下失败
- database - SQLITE DB如何将多个表的数据保存在一个文件中?
- gitlab - GitLab:使用 CI_JOB_TOKEN 从管道未经授权访问 API
- python - 如何删除 Pandas 数据框中的 NaN 值,其列在另一个数据框中作为编码值被引用,表示缺失或未知值