英文:
How can I make my dropdown disappear again using an if statement with css values as the condition?
问题
if 语句没有按预期工作。我已将 css 值作为条件。但是，if 语句的条件似乎有问题，因为我的单击“document”未产生所期望的效果，即执行“dontGetIt”函数，从而使下拉菜单显示为“none”。
HTML:
<div class="navs" id="menu">
<p>MENU</p>
<ul id="dropdown">
<li><a href="index.html">HOME</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="books.html">BOOKS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
CSS:
.block {
display: block !important;
}
#dropdown {
display: none;
border: 1px solid black;
background: rgb(29, 18, 80);
width: 6vw;
list-style: none;
text-align: left;
}
JavaScript:
const menu = document.getElementById("menu");
const dropdown = document.getElementById("dropdown");
const getIt = () => {
dropdown.classList.add("block");
}
const dontGetIt = () => {
dropdown.classList.remove("block");
}
menu.onclick = getIt;
if (dropdown.style.display === "block") {
alert("apple");
dontGetIt;
}
else {
alert("orange");
}
我希望在单击“menu”后下拉菜单再次消失，但是一旦单击“menu”显示下拉菜单后，再次单击“document”使 if 语句可以执行并将 block 显示更改回“none”，这并没有发生。
由于某种原因，if 语句中的条件 () 仅在我通过 JavaScript 应用它时检测到“dropdown.style.display”，而如果我通过 CSS 进行操作，则不会检测到。
英文:
The if statement isn't working as it should. I have put a css value as the condition . However, there seems to be something wrong with the if statement's condition as my clicking "document" is not having the desired effect of executing "dontGetIt" function and thus making the dropdown display as "none".
HTML:
<div class="navs" id="menu">
<p>MENU</p>
<ul id="dropdown">
<li><a href="index.html">HOME</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="books.html">BOOKS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
CSS:
.block {
display: block !important;
}
#dropdown {
display: none;
border: 1px solid black;
background: rgb(29, 18, 80);
width: 6vw;
list-style: none;
text-align: left;
}
Javascript:
const menu = document.getElementById("menu");
const dropdown = document.getElementById("dropdown");
const getIt = () => {
dropdown.classList.add("block");
}
const dontGetIt = () => {
dropdown.classList.remove("block");
}
menu.onclick = getIt;
if (dropdown.style.display === "block") {
alert("apple");
dontGetIt;
}
else {
alert("orange");
}
I want the dropdown to disappear again after I click the "document" (anywhere) once the dropdown appears after I click "menu". However, even though clicking the menu turns the dropdown display to "block" in css, once I click the "document" again so the if statement can execute and the block display turns back to "none", this doesn't happen.
For some reason the if statement's condtion in () is only detecting "dropdown.style.display" if I apply it in javascript, but not if I do it through CSS.
答案1
得分: 0
这里有一些与切换菜单有关的不同问题，正如我评论中所述，你的假设代码会在不刷新整个页面的情况下运行是不正确的。
总的来说，最好使用console.log来进行调试，而不是使用alert。
第一个问题是在这种情况下你将无法获取计算出的样式，需要使用[getComputedStyle][1]。
第二个问题是你需要一种处理不在菜单上点击的方式。
我调整了边框样式，以便更明显地看到元素的边界。
我添加了一个body事件监听器来处理点击事件。请记住，子元素的事件会一直冒泡到所有父元素/祖先元素，因此在切换情况下，如果不阻止这种情况发生，父事件监听器会立即撤消将菜单显示设置为块的类的添加。
这段代码并不一定代表达到你目标的最佳方式，但它为你提供了一个调试和进一步实验的出发点。
const menu = document.getElementById("menu");
const dropdown = document.getElementById("dropdown");
const getIt = (e) => {
const style = window.getComputedStyle(dropdown);
console.log(style.display);
if (style.display !== "block") {
dropdown.classList.add("block");
e.stopImmediatePropagation();
}
}
const dontGetIt = (e) => {
const style = window.getComputedStyle(dropdown);
if (style.display === "block") {
dropdown.classList.remove("block");
console.log("Remove Block");
e.stopImmediatePropagation();
}
}
document.body.addEventListener('click', dontGetIt);
menu.onclick = getIt;
.vh {
height: 100vh;
}
.block {
display: block !important;
}
.navs {
border: 2px solid green;
}
#dropdown {
display: none;
border: 1px solid red;
background: rgb(29, 18, 80);
width: 6vw;
list-style: none;
text-align: left;
}
<body class="vh">
<div class="navs" id="menu">
<p>MENU</p>
<ul id="dropdown">
<li><a href="index.html">HOME</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="books.html">BOOKS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</body>
英文:
There are few different issues with toggling this, and as I commented, your assumption that code will run without a full page reload was incorrect.
In general, it is better to use console.log than to use alert for debugging.
The first issue is that you will not get the computed style in this circumstance, and need to utilize getComputedStyle.
The 2nd is that you need some way of handling clicks on the body that aren't on the menu.
I tweaked the border styles to make it obvious to the boundary of the elements.
I added a body event listener, to handle clicks. It's important to keep in mind that events from a child bubble up through all the parents/ancestors, so in a toggling situation, without preventing this, the parent eventlistener would immediately undo the addition of the class setting the menu display to block.
This code isn't meant to necessarily represent the best way of meeting your objectives, but does provide you a jumping off point for debugging and experimenting further.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const menu = document.getElementById("menu");
const dropdown = document.getElementById("dropdown");
const getIt = (e) => {
const style = window.getComputedStyle(dropdown);
console.log(style.display);
if (style.display !== "block") {
dropdown.classList.add("block");
e.stopImmediatePropagation();
}
}
const dontGetIt = (e) => {
const style = window.getComputedStyle(dropdown);
if (style.display === "block") {
dropdown.classList.remove("block");
console.log("Remove Block");
e.stopImmediatePropagation();
}
}
document.body.addEventListener('click', dontGetIt);
menu.onclick = getIt;
<!-- language: lang-css -->
.vh {
height: 100vh;
}
.block {
display: block !important;
}
.navs {
border: 2px solid green;
}
#dropdown {
display: none;
border: 1px solid red;
background: rgb(29, 18, 80);
width: 6vw;
list-style: none;
text-align: left;
}
<!-- language: lang-html -->
<body class="vh">
<div class="navs" id="menu">
<p>MENU</p>
<ul id="dropdown">
<li><a href="index.html">HOME</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="books.html">BOOKS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论