Javascript使用eventListener切换单击

如何仅使用一个按钮而不是使用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>

---

您可以将按钮的状态更改为打开和关闭

像这样的东西会有用的

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

---

您可以将按钮的状态更改为打开和关闭

像这样的东西会有用的

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

注意：在上述代码中，您忘记关闭应答器

最好的方法是在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";

};

现场：

注意：在上述代码中，您忘记关闭应答器

最好的方法是在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";

};

---

在live中：

尝试使用此处给定的代码片段

HTML

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

---

尝试使用这里给出的代码片段

HTML

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

---

感谢回答Vijaykrish93，但我想使用eventListeneradd进行切换此函数作为eventlisetner感谢回答Vijaykrish93，但我想使用eventListeneradd进行切换此函数作为eventlisetner