Javascript：如何创建下拉效果？ （没有 JQuery）

Question

在单击菜单按钮时，会显示下拉菜单，但是，再次单击该按钮并不会像应有的那样隐藏下拉菜单。

脚本.js

//Variables
var menuBtn = document.getElementById('menu__icon');
var dropdown = document.getElementsByClassName('dropdown__menu')[0];

var isClicked = false;

// Drop down Mobile
menuBtn.addEventListener('click', function () {
  if (isClicked == false) {
    //Btn Styles
    menuBtn.style.backgroundColor = "none";
    menuBtn.style.color = "black";
    //Menu visible
    dropdown.style.display = "none";
  } else {
    isClicked = true;
    //Btn Styles
    menuBtn.style.backgroundColor = "#1f283b";
    menuBtn.style.color = "black";
    //Menu visible
    dropdown.style.display = "block";
  }
});

Answer 1

最好更改“if 块语句”的内容以显示下拉列表，因为 isClicked 的初始值为 false。 单击该按钮后，必须将 isCliked 更新为 true，因为您单击了它。 然后 else 块将包含隐藏下拉列表的代码，然后将 isClicked 变量更新为 false。

isClicked = false;

// inside the event listener
if(isClicked==false){
    //show dropdown
    isClicked = true;
}else{
    //hide dropdown
    isClicked = false;
}

您还可以使用 jquery 库并使用 toggle() 函数

Answer 2

在第一个 if 语句中将 isClicked 设置为 true，然后在另一个 if 语句中设置为 false。

    //Variables
    var menuBtn = document.getElementById('menu__icon');
    var dropdown = document.getElementsByClassName('dropdown__menu')[0];

    var isClicked = false;

    // Drop down Mobile
    menuBtn.addEventListener('click', function(){
    
    if (isClicked == false) {
    //Btn Styles
    menuBtn.style.backgroundColor = "none";
    menuBtn.style.color = "black";
    //Menu visible
    dropdown.style.display = "none";
    isClicked = true
    } else {
        isClicked = false;
        //Btn Styles
        menuBtn.style.backgroundColor = "#1f283b";
        menuBtn.style.color = "black";
        //Menu visible
        dropdown.style.display = "block";
    }
    
    });

Answer 3

您最好使用 CSS，打开和关闭类。 通过这种方法，您还可以利用 CSS Transitions。

 var menuBtn = document.getElementById('menu__icon'); var dropdown = document.getElementsByClassName('dropdown__menu')[0]; menuBtn.addEventListener("click", function() { this.classList.toggle("active"); dropdown.classList.toggle("active"); });

 .dropdown__menu { /*display: none;*/ transform: scaleY(0); transform-origin: top; transition: transform 0.26s ease; } .dropdown__menu.active { /*display: block;*/ transform: scaleY(1); } #menu__icon { transition: all 1s; } #menu__icon.active { background-color: #1f283b; color: #FFF; }

 <button id="menu__icon">Click Me</button> <div class="dropdown__menu">I'm a menu</div>

如果您真的想保留 javascript 中的样式，请在一处反转 isClicked 变量。

//Variables
var menuBtn = document.getElementById('menu__icon');
var dropdown = document.getElementsByClassName('dropdown__menu')[0];

var isClicked = false;

// Drop down Mobile
menuBtn.addEventListener('click', function () {
  if (!isClicked) {
    //Btn Styles
    menuBtn.style.backgroundColor = "none";
    menuBtn.style.color = "black";
    //Menu visible
    dropdown.style.display = "none";
  } else {
    //Btn Styles
    menuBtn.style.backgroundColor = "#1f283b";
    menuBtn.style.color = "black";
    //Menu visible
    dropdown.style.display = "block";
  }
  //Invert true/false
  isClicked = !isClicked
});