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 中将显示设置为无。感谢您的帮助。

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