从Javascript函数中排除一个额外的id

Question

是否可以向该代码添加一个id，这样当点击所需的容器本身(移动导航(加上一个额外的id(汉堡包菜单div(时，它就不会触发。我有一个按钮来触发导航(汉堡包菜单div(。它切换一个类。所以当我点击那个特定的按钮时，这个代码应该什么都不做。。。这可能吗？或者我的思维有错误吗？

//Actual code and working but how to insert an additional id to avoid triggering it also on that id
document.addEventListener('mouseup', function(e) {
var container = document.getElementById('mobile-navigation');
if (!container.contains(e.target)) {
container.style.display = 'none';
}
});
//Changed to this code to select multiple ids but not working
document.addEventListener('mouseup', function(e) {
var container = document.querySelectorAll('mobile-navigation, hamburger-menu-div');
if (!container.contains(e.target)) {
container.style.display = 'none';
}
});

感谢您的支持！

编辑：放入更多的代码以更好地理解：

//Toggle nav menu to show and hide
document.getElementById("hamburger-menu-div").addEventListener("click", function() {
var x = document.getElementById("mobile-navigation");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
});

//Hide it when clicked outside
var container = document.querySelectorAll('#mobile-navigation, #hamburger-menu-div');
document.addEventListener('mouseup', function(e) {
console.log(e.target);
var set = 0;
for (var i = 0; i < container.length; i++) {
if (e.target == container[i]) {
set = 1;
}
}
if (set === 0) {
container[1].style.display = 'none';
}
});

.hamburger-menu-div {
background-color: lightblue;
width: 250px;
height: 50px;
}
.mobile-navigation {
background-color: lightgreen;
width: 250px;
display: none;
position: fixed;
top: 0;
right: 0;
}

<div id="hamburger-menu-div" class="hamburger-menu-div">
BUTTON
</div>

<div id="mobile-navigation" class="mobile-navigation">
<p>- Navigationpoint 1</p>
<p>- Navigationpoint 2</p>
<p>- Navigationpoint 3</p>
<p>- Navigationpoint 4</p>
<p>- Navigationpoint 5</p>
</div>

Answer 1

如果这不是你想要的，请告诉我。从您的代码中，您似乎想隐藏未点击的元素，对吗？

var container = document.querySelectorAll('#mobile-navigation, #hamburger-menu-div');
document.addEventListener('mouseup', function(e) {
//console.log(container);
for (var i = 0; i < container.length; i++) {
if (!(container[i].contains(e.target))) {
container[i].style.display = 'none';
}
}
});

<div id = 'mobile-navigation'>
lorem
</div>
<div id = 'hamburger-menu-div'>
ipsem
</div>

另一种尝试：

var container = document.querySelectorAll('#mobile-navigation, #hamburger-menu-div');
document.addEventListener('mouseup', function(e) {
console.log(e.target);
var set=0;
for (var i = 0; i < container.length; i++) {
if (e.target==container[i]) {
set=1;
}
}
if(set===0){
container[0].style.display = 'none';
}
});
//this does the same as the code below, but with two ids..
/*
document.addEventListener('mouseup', function(e) {
var container = document.getElementById('mobile-navigation');
if (!container.contains(e.target)) {
container.style.display = 'none';
}
});
*/

<div id = 'mobile-navigation'>
mobile-navigation
</div>
<br>
<br>
<br>
<div id = 'hamburger-menu-div'>
hamburger-menu-div
</div>
<br>
<div>
click here to close menu
</div>

第三次尝试：既然您已经提供了HTML(做这件事总是更好(，并解释了您正在尝试做什么，这个解决方案应该可以工作了。如果没有，让我知道什么是不好的，我会解决它。

//Toggle nav menu to show and hide
document.getElementById("hamburger-menu-div").addEventListener("click", function() {
var x = document.getElementById("mobile-navigation");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
});

//Hide it when clicked outside
var x = document.getElementById("mobile-navigation");
document.addEventListener('mouseup', function(e) {
console.log(e.target);
if (!(x.contains(e.target) || e.target == document.getElementById("hamburger-menu-div"))) {
x.style.display = 'none';
}
});

.hamburger-menu-div {
background-color: lightblue;
width: 250px;
height: 50px;
}
.mobile-navigation {
background-color: lightgreen;
width: 250px;
display: none;
position: fixed;
top: 0;
right: 0;
}

<div id="hamburger-menu-div" class="hamburger-menu-div">
hamburger-menu-div
</div>

<div id="mobile-navigation" class="mobile-navigation">
<h1> mobile nav </h1>
<p>- Navigationpoint 1</p>
<p>- Navigationpoint 2</p>
<p>- Navigationpoint 3</p>
<p>- Navigationpoint 4</p>
<p>- Navigationpoint 5</p>
</div>