Question

我想通过点击sidenav外面的任何地方关闭sidenav 我的HTML代码是

elm

Js我试过：

<body>
<!-- show image while loading -->
<div class="se-pre-con"></div>
<!-- Header starts here -->
<div class = "header">
    <!-- search bar -->
    <?php include("header.php");?>
    <!-- search bar ends here -->
</div>
<!-- header ends here -->

<div class="primary" id="primary">
    <!-- image slider starts here -->
    <div class="image-slider">
        <?php include("slider.php");?>
    </div>
    <!-- image slider starts here -->

    <!-- all-content starts here -->
    <div class = "container wraper">

        <!-- content starts here -->
        <div class="content">
            <h3 class="Category"><strong> Category </strong>
            <button type="submit" class="btn btn-xs btn-success complete" id="more"><strong>More </strong> <span class="glyphicon glyphicon-forward"></button>
            </h3><hr id="index-hr">
            <?php include("functions/index_category.php"); ?>
        </div>
        <!-- content ends here -->

    </div>
    <!-- all-content ends here-->

        <!-- daily adds starts here -->
    <div class="container news">
        <h3 class="news"><strong> Daily News </strong></h3><hr id="index-hr">
    </div>
        <!-- daily adds ends here -->

    <!-- side nav starts here -->
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div id="result">
        <?php include("functions/sub_category.php")?>
        </div>
    </div>
    <!-- side nav ends here -->
</div>
</body>

如何通过替换event.target == sidenav单击侧面导航上的enywhere但是我想通过外部clickng关闭它

用于打开和关闭侧面导航的

是

//close the side nav when clicked outside
 var primary = document.getElementById('primary');
 var sidenav = document.getElementById('mySidenav');
 window.onclick = function(event){
     if( event.target == primary ){
        sidenav.style.width = "0px";
        primary.style.marginLeft = "0px";
     }
 }

css代码：

function openNav() {
    if($(window).width() > 600){
        $("#mySidenav").attr("style","width:350px");
        $(".primary").attr("style","margin-left:350px");
    }else{
        $("#mySidenav").attr("style","width:100%");
        $(".primary").attr("style","margin-left:100%");
    }

}

function closeNav() {
    $("#mySidenav").attr("style","width:0px");
    $(".primary").attr("style","margin-left:0px");
}

Answer 1

只需检查npm install，看看它是不是侧导航，导航是否尚未打开：

event.target

这是您的代码的粗略实现，但您可以看到侧导航栏确实打开（黄色）并且如果您单击它将不会关闭，但如果您单击其他任何位置将关闭。

//close the side nav when clicked outside
 var primary = document.getElementById('primary');
 var sidenav = document.getElementById('mySidenav');

 window.onclick = function(event){

     var sideNavWidth = sidenav.style.width;

     // check to see if the event target was not the side nav
     // AND that the side nav is open
     if( event.target !== sidenav && sideNavWidth !== "0" ){
        sidenav.style.width = "0";
        primary.style.marginLeft = "0";
     }
 }

//close the side nav when clicked outside
 var primary = document.getElementById('primary');
 var sidenav = document.getElementById('mySidenav');

 window.onclick = function(event){

     var sideNavWidth = sidenav.style.width;

     // check to see if the event target was not the side nav
     // AND that the side nav is open
     if( event.target !== sidenav && sideNavWidth !== "0" ){
         closeNav();
     }
 }
 
 function closeNav(){
          sidenav.style.width = "0";
        primary.style.marginLeft = "0";
 }

.sidenav { background: yellow;}

单击sidenav外面的enywhere关闭sidenav

1 个答案: