Javascript Toggle click 使用 eventListener

Question

我怎樣才能只使用一個按鈕來切換它，而不是使用 addEventListener-click 來打開和關閉按鈕？

謝謝

html代碼：

<nav>
  <ul>
    <li id="first"><a href="#">Home</li>
  </ul>
</nav>
    <button id = "btn">Click to Open</button>
  <button id = "btnRemove">Click to Close</button>

JS代碼：

document.getElementById("btn").addEventListener("click", myFunction, false);

function myFunction() {
  var x = document.getElementById("first");
  x.style.transition = "all 2s ease";
  x.style.background = "red";
  x.style.borderBottom = "1px solid black";
  x.style.width = "100px";
  x.style.height = "100px";

};

document.getElementById("btnRemove").addEventListener("click", myFunction_remove, false);

function myFunction_remove() {
  var y = document.getElementById("first");
  y.style.transition = "all 2s ease";
  y.style.background = "";
  y.style.borderBottom = "";
  y.style.width = "5px";
  y.style.height = "15px";

};

Answer 1

您可以將按鈕的狀態更改為打開和關閉

這樣的事情會起作用

document.getElementById("btn").addEventListener("click",function(event){
 if(event.target.getAttribute("status")=="open"){
    event.target.setAttribute("status","close")  
    /**/
  }
else if(event.target.getAttribute("status")=="close"){
    event.target.setAttribute("status","open")  
    /**/
  }
else if(event.target.getAttribute("status")==null){
    event.target.setAttribute("status","open")  
    /**/
  }  
},false);

Answer 2

注意：您忘記在上面的代碼中關閉您的 balise。

最好的方法是將您的樣式添加到 css 類中。

#first {
    transition : all 2s ease;
    background-color : auto;
    borderBottom : 0px;
    width : 5px;
    height : 15px;
}

#first.activate {
    background-color : red;
    border-bottom : 1px solid black;
    width : 100px;
    height : 100px;
}

然后在單擊 javascript 按鈕時更改類。

document.getElementById("btn").addEventListener("click", myFunction, false);

function myFunction() {
  var x = document.getElementById("first");
  x.className = (x.className === "activate") ? "" : "activate";

};

直播： https : //jsfiddle.net/qx8vu7h7/1

Answer 3

像這里給定的代碼片段一樣嘗試

HTML

 <div id="toggleArea" class='active'> Toggle area see in class name </div>
 <button id="btnToggle"> Toggle Button </button>

JavaScript

const toggleArea = document.getElementById('toggleArea')
const btnToggle = document.getElementById('btnToggle')

btnToggle.addEventListener('click', function() {
  if (toggleArea.classList.contains('active')) {
    toggleArea.classList.remove("active");
    toggleArea.classList.add("disable");
  } else {
    toggleArea.classList.remove("disable");
    toggleArea.classList.add("active");
  }
})