单击外部时关闭导航（位置固定）但单击导航链接时不关闭？

Question

我到处寻找并尝试了几件事，但是当您单击链接时，我找不到使导航不关闭的方法。 在这个 state 当我点击任何地方时它会关闭。

我知道这是因为导航是 position FIXED所以它在文档流程之外，这就是为什么单击链接与单击任何地方相同。 我能做些什么？

有人有想法吗？

非常感谢！

JS：

<script>
  window.addEventListener('mouseup', function(event) {
    var nav = $("#mySidenav");
    var navlinks = $("[id^='navLink']");
    if(event.target != nav && event.target != navlinks){
      closeNav();
    };
  })
</script>

CSS：

 .sidenav {
    height: 100%; 
    width: 25rem; 
    position: fixed; 
    z-index: 5;  
    left: -27rem;
    background: linear-gradient(15deg, #e2af40a9, rgba(51, 116, 116, 
    0.589)30%, rgb(51, 116, 116));
    overflow: hidden;
    padding-top: 1rem; 
    transition: all ease-in-out 0.4s; 
   }

HTML：

<div id="mySidenav" class="sidenav">
    <img id="logo" src="..." alt="...">

     <a href="javascript:void(0)" class="text-decoration-none closebtn" 
     onclick="closeNav()">&times;</a>
            
     <a id="navLink1" class="animNav item text-decoration-none align-bottom" 
     href="#">about</a>
            
      <a id="navLink2" class="animNav item text-decoration-none align-bottom" 
      href="#">another link</a>
            
       <a id="navLink3" class="animNav item text-decoration-none align-bottom" 
       href="#">another link</a>
            
       <a id="navLink4" class="animNav item text-decoration-none align-bottom" 
       href="#">another link</a>
            
       <a id="navLink5" class="animNav item text-decoration-none align-bottom" 
       href="#">another link</a>
</div>

    <button type="button" class="navbar-dark btn btn-styleNav navbar-toggler" onclick="openNav()" &#9776;>          
        <span class="navbar-toggler-icon"></span>
    </button>
    
    <script>
       function openNav() {
          $("#mySidenav").css({"left": "0rem"});}
                
        function closeNav() {
           $("#mySidenav").css({"left": "-27rem"});}
    </script>

Answer 1

好的，我发现什么不起作用：EventListeners dont understand Jquery。 + 我的代码写得不太好，所以我清理了它！

所以，这是我的工作代码，如果它可以帮助某人！

HTML

<!--NAVIGATION-->
<header>
    <div id="mySidenav" class="sidenav">
        <button type="button" id="closeButton">&times;</button>

        <a href="#">Link</a>

        <a href="#">Link</a>

        <a href="#">Link</a>

        <a href="#">Link</a>

        <a href="#">Link</a>
    </div>

    <button id="openButton" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
</header>

CSS

.sidenav {
    height: 100%;
    width: 25rem;
    position: fixed;
    z-index: 5;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0px;
    z-index: 1;
    overflow: hidden;
}

JS

//SIDENAV OPEN AND CLOSE DEPENDING ON WHERE YOU CLICK

var open = false;
//Opening and closing functions
function openNav() {
    $("#mySidenav").css({"left": "0rem"});
    open = true; 
}

function closeNav() {
    $("#mySidenav").css({"left": "-27rem"});
    open = false;
}
//Event on button to open the nav 
$("#openButton").click(function() {
    openNav();
    console.log("Opening nav")
});
//Event on button to close the nav
$("#closeButton").click(function() {
    closeNav();
    console.log("Closing nav")
});

//check if the nav is opened and if the element clicked is NOT the nav and if the element clicked is also NOT the navlinks (that is to say: you clicked anywhere else on the page) then, the nav closes.
document.addEventListener("mouseup", function(event){
    var nav = document.getElementById('mySidenav');
    if(open == true && event.target != nav && event.target.parentNode != nav){
            closeNav();
            console.log("Closing because the click was not on the nav and not on the nav links");
    //check if the nav is really closed
    } else if (open == false) {
        console.log("Nav is closed by default")
    }  
})