Question

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()">&times;</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代码在这里。我做的事？

Answer 1

请尝试以下操作：

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

当我单击NavBar按钮时，它会出现，但是当我再次单击它时它并不会消失

1 个答案: