文章/答案/技术大牛

发布

社区首页 >问答首页 >通过单击sidenav外部的enywhere关闭sidenav

问通过单击sidenav外部的enywhere关闭sidenav
EN

Stack Overflow用户

提问于 2016-12-13 23:38:11

回答 1查看 977关注 0票数 0

我想通过单击sidenav之外的任何地方来关闭sidenav。我的html代码是

<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>

我试过的Js：

//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";
     }
 }

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

用于打开和关闭侧边导航的js是

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

css代码：

.wraper{
    min-height: 165px;
    overflow: hidden;
    height: 200px;
}
.content {
    margin-top: 30px;
}
#more{
    width:6%;
    margin-right:0px;
    float:right;
}
.wraper.complete{
    height: auto;
}
h3.sub{
    color:#d34615;
    text-decoration:underline;
    padding-left: 10px;
}
#index-hr{
    width:100%;
    border-top:1px solid #333;
    opacity:0.3;
}

javascript

html

回答 1

Stack Overflow用户

发布于 2016-12-13 23:42:03

只需检查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;}

<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41124964

复制

相似问题

问通过单击sidenav外部的enywhere关闭sidenav
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过单击sidenav外部的enywhere关闭sidenavEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过单击sidenav外部的enywhere关闭sidenav
EN