在按钮单击时切换显示在第一次单击时有效，但不会再次使显示隐藏答案

【问题标题】：Toggling display on button click works on first click but wont make display hidden again在按钮单击时切换显示在第一次单击时有效，但不会再次使显示隐藏
【发布时间】：2021-05-22 02:00:49
【问题描述】：

我有一个 div 我想在单击按钮之前隐藏，当再次单击该按钮时，再次隐藏该 div。当我第一次单击它以显示 div 时，它可以工作，但显示不会再次隐藏。我知道该按钮不止一次可以使用，因为我的 console.log("hi") 每次点击都会登录。

let menuBtn = document.querySelector("#menu-button");
let menuOption = document.querySelector(".menu-options");
menuOption.style.display = "none";

menuBtn.addEventListener('click',() => {
    console.log("hi");
    if (menuOption.style.display = "none") {
        menuOption.style.display = "initial"
    } else {
        menuOption.style.display = "none"
    }
});

 #menu-button {

            margin: auto;
            background-color:transparent;
            outline: none;
            border: none;
        }
.menu-options {
            position: absolute;
            background-color: khaki;
            height: 100px;
            width: 30px;
        }

 <button type="button" id="menu-button">
            hi
            <div class="menu-options">
                <ul>
                    <li>
                        home
                    </li>
                    <li>
                       about
                    </li>
                    <li>
                       portfolio
                    </li>
                </ul>
            </div>
          </button>

【问题讨论】：

标签： javascript html jquery css display

【解决方案1】：

在我看来，最好的方法是使用隐藏 div 的类。

然后使用 JS 在元素中添加或删除该类以隐藏它们或使它们出现。您可以使用下面的语法来实现它。

// Get the element from the DOM
const element = document.getElementById("<id of that element>");

// Add the class called `hide`
element.classList.add("hide"); 

// Remove the `hide` class
element.classList.remove("hide"); 

/* 
    Toggle the class `hide`. That means it will either remove 
    it if the element already has that class or add the that class
    it don't have that
*/

element.classList.toggle("hide");

const btn = document.getElementById("btn");
const square = document.getElementById("square");


btn.addEventListener("click", ()=> square.classList.toggle("hide"));

div {
  width: 200px;
  height: 200px;
  background-color: red;
}

.hide {
  display: none
}

<button id="btn">Click me!</button>
<div class="hide" id="square"></div>

【讨论】：

【解决方案2】：

正确的做法：

const menuBtn = document.querySelector("#menu-button")
menuBtn.addEventListener('click',() => menuBtn.classList.toggle('noMenu'))

#menu-button {
  margin           : auto;
  background-color : transparent;
  outline          : none;
  border           : none;
  }
#menu-button.noMenu  > div.menu-options { 
  display : none;
  }
.menu-options {
  position         : absolute;
  background-color : khaki;
  height           : 100px;
  width            : 30px;
  }

<div id="menu-button" class="noMenu">
  hi
  <div class="menu-options">
    <ul>
      <li> home      </li>
      <li> about     </li>
      <li> portfolio </li>
    </ul>
  </div>
</div>

【讨论】：

【解决方案3】：

您需要比较值，而不是赋值。因此，您应该使用=== 而不是=

menuBtn.addEventListener('click',() => {
    console.log("hi");
    if (menuOption.style.display === "none") {  //this should use compare
        menuOption.style.display = "initial"
    } else {
        menuOption.style.display = "none"
    }
});

【讨论】：