从 Javascript 函数中排除一个额外的 id
Excluding an additional id from Javascript function
是否可以向此代码添加一个 id,以便在单击所需容器本身(移动导航)时不会触发它加上一个额外的 id(汉堡菜单-div) .我有一个触发导航的按钮 (hamburger-menu-div)。它切换 class。所以当我点击那个特定的按钮时,这段代码应该什么都不做......这可能吗?还是我的想法有误?
//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>
如果这不是您想要的,请告诉我。从您的代码看来,您想要隐藏 未 单击的元素,对吗?
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>
是否可以向此代码添加一个 id,以便在单击所需容器本身(移动导航)时不会触发它加上一个额外的 id(汉堡菜单-div) .我有一个触发导航的按钮 (hamburger-menu-div)。它切换 class。所以当我点击那个特定的按钮时,这段代码应该什么都不做......这可能吗?还是我的想法有误?
//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>
如果这不是您想要的,请告诉我。从您的代码看来,您想要隐藏 未 单击的元素,对吗?
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>