javascript - Javascript在点击时隐藏/显示不起作用

Question

我正在尝试使用 Html 和 Javascript 创建一个下拉列表，但由于某种原因它无法正常工作，尽管观看了 Youtube 上的每个视频。这是我正在使用的代码：HTML：

<div class="dropdown">
    <button id="dropdownbtn" onclick="dropdown()">Courses &#9662</button>
    <div id="dropdown-items">
        <li class="li"><a href="#" class="li">button!!</a></li>
        <li class="li"><a href="#" class="li">button!!</a></li>
        <li class="li"><a href="#" class="li">button!!</a></li>
        <li class="li"><a href="#" class="li">button!!</a></li>
    </div>
</div>

JavaScript：

var flag = 0;
function dropdown() {

    if (flag==0) {
        document.getElementById("dropdown-items").style.display = "none";
        flag=1;
    } 

    if (flag==1) {
        document.getElementById("dropdown-items").style.display = "block";
        flag=0;
    }
}

我css也将显示设置为无。谢谢您的帮助。

标签： javascripthtml

Answer 1

它实际上正在工作，但是您必须放置 else if 因为在 if 条件下您将标志更改为 1 并且第二个条件变为 true

var flag = 0;

function dropdown() {

    if (flag==0) {

        document.getElementById("dropdown-items").style.display = "none";

        flag=1;
    } 
    else if (flag==1) {

        document.getElementById("dropdown-items").style.display = "block";

        flag=0;
    }
}