私はsidenav外の任意の場所をクリックしてsidenavを閉じたい

sidenav外enywhereをクリックしてsidenavを閉じる私のhtmlコードは、私が試した私はsidenav外の任意の場所をクリックしてsidenavを閉じたい

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

どのように今までそれevent.target == sidenavを置き換えてサイドナビゲーションでenywhereをクリックして作業しますが、外側をクリックして閉じることができます

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

出典

2016-12-13 Mps

？ – happymacarts

プライマリをクリックすると閉じられませんでした – Mps

ちょうどそれはサイドナビゲーションではなかったとNAVはまだ開いていないことかどうかを確認するために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>

出典

2016-12-13 15:42:02

試してみましたが...その場合は、サイドナビゲータが最初に開かない – Mps

@Mps私の更新された答えを見てください。また、FYI：CSSサイズを0に設定すると、測定単位（「px」）は必要ありません。 –

あなたの更新された回答では、event.target！== sidenavを使用しましたが、mwはサイド・ナビゲーション自体が開かない同じ問題になります。一度私は問題があるかもしれないと推測しているHTMLコードをチェックしてください。プライマリに他のdiv要素が含まれています – Mps

私はsidenav外の任意の場所をクリックしてsidenavを閉じたい

答えて

関連する問題