Javascript 当我点击导航栏按钮时，它会出现，但当我再次点击它时，它不会消失

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； document.body.style.backgroundColor=“rgba（0,0,0,0.6）”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； document.body.style.backgroundColor=“白色”； } $（文档）。在（'单击'）上，函数（e）{ if（$（e.target）.最近（'#sideNavButton'）。长度）{ $（“#mySidenav”）.show（）； }else if（！$（e.target）.最近（'#mySidenav'）.长度）{ $（'#mySidenav'）.hide（）；document.body.style.backgroundColor=“白色”； } });

.sidenav{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：20px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}

请尝试以下操作：

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>

JS:-

---

它不工作，即使使用此按钮，侧导航栏也无法通过单击按钮打开。您可以共享模型的链接吗？

#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;
}

$(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');
}
});
});