javascript - 如何制作JavaScript切换按钮？

我有以下代码，但它不起作用：

HTML：

<button id="btn_search">Search</button>
<input id="srh" type="search">

JS：

var btnSearch = document.getElementById("btn_search");
var search = document.getElementById("srh");

if (document.addEventListener) {
   btnSeach.addEventListener('click',activeSearch);
} else if (document.attackEvent) {
   btnSearch.attackEvent('onclick',activeSearch);
}

function activeSearch (event) {
  event.preventDefault();
  if (search.style.width == '0') {
    search.style.width = '14.8em';
    search.style.opacity = '1';
} else if (search.style.width == '14.8em') {
    search.style.width = '0';
    search.style.opacity = '0';
}

我需要一个切换按钮
我该怎么办？

最佳答案

我可能会考虑使用CSS类和toggle（）来显示/隐藏您的元素。

var btnSearch = document.getElementById("btn_search");
btnSearch.addEventListener('click', function(event){
  var search = document.getElementById("srh");
  search.classList.toggle("hidden");
  event.preventDefault();
});

#srh { width: 14.8em; }
#srh.hidden { display: none; }

<button id="btn_search">Search</button>
<input id="srh" type="search" />

关于javascript - 如何制作JavaScript切换按钮？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39376799/