我怎样才能使我的下拉菜单再次消失使用一个if语句与css值作为条件？

txu3uszq 于 2023-05-30 发布在其他

关注(0)|答案(1)|浏览(150)

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");
}

我想下拉菜单消失后，我再次点击“文档”（任何地方）一旦下拉菜单出现后，我点击“菜单”。然而，即使在css中点击菜单会将下拉菜单显示为“block”，一旦我再次点击“document”，这样if语句就可以执行了，块显示又回到了“none”，这就不会发生了。
由于某些原因，if语句的条件（）只检测到“dropdown.style.display”，如果我在javascript中应用它，但如果我通过CSS执行它，则不会。

css

来源：https://stackoverflow.com/questions/76348523/how-can-i-make-my-dropdown-disappear-again-using-an-if-statement-with-css-values

1条答案

按热度按时间

nbnkbykc1#

切换这个选项有一些不同的问题，正如我所评论的，您假设代码将在没有整个页面重新加载的情况下运行是不正确的。
一般来说，使用console.log比使用alert进行调试更好。
第一个问题是，在这种情况下，您将无法获得计算样式，并且需要使用getComputedStyle。
第二个是你需要一些方法来处理不在菜单上的身体点击。
我调整了边框样式，使其对元素的边界很明显。
我添加了一个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>

赞(0）回复(0）举报 2023-05-30

我来回答

我怎样才能使我的下拉菜单再次消失使用一个if语句与css值作为条件？

1条答案

相关问题

热门标签

最新问答