Javascript 使用事件监听器切换点击

Answer 1

注意：您忘记在上面的代码中关闭应答器。

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

};

Answer 2

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

这样的东西会起作用

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

Answer 4

我使用这个代码：

const clicker = (el, func) => {
    return document.querySelectorAll(el).forEach((e) => {
        e.addEventListener('click', func)
    })
}
clicker('.clickClass', () => {
    const el = document.querySelectorAll('.myCLassname')
    el.forEach((e) => {
        if (e.classList.contains('hidden')) {
            e.classList.remove('hidden')
            e.classList.add('flex')
        }
        else {
            e.classList.remove('flex')
            e.classList.add('hidden')
        }
    });
});