[英]Close nav (position fixed) when click outside but NOT when navlinks are clicked?
我到處尋找並嘗試了幾件事,但是當您單擊鏈接時,我找不到使導航不關閉的方法。 在這個 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()">×</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()" ☰>
<span class="navbar-toggler-icon"></span>
</button>
<script>
function openNav() {
$("#mySidenav").css({"left": "0rem"});}
function closeNav() {
$("#mySidenav").css({"left": "-27rem"});}
</script>
好的,我發現什么不起作用:EventListeners dont understand Jquery。 + 我的代碼寫得不太好,所以我清理了它!
所以,這是我的工作代碼,如果它可以幫助某人!
HTML
<!--NAVIGATION-->
<header>
<div id="mySidenav" class="sidenav">
<button type="button" id="closeButton">×</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")
}
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.