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