需要帮助了解我的JavaScript切换函数中的单击行为吗

这应该很简单，但我不明白为什么它不能按预期工作。我有一个搜索栏，默认情况下，它有一个“search bar--hidden”类，该类应用“display:none”属性，“search bar--visible”类应用“display:flex”

我有一个函数来切换这些类

在我的HTML中，我有：

<div class="site-head__icn-search" onclick="toggleSearch()">
    <i class="fas fa-search"></i>
</div>

当我单击搜索图标时，搜索框确实会按预期显示。当我再次点击它时，它消失了……但当我释放第二次点击时，它又出现了。这几乎就像浏览器不知何故检测到了额外的点击

你可以在网站上看到所有这些都在起作用

有人能帮我理解发生了什么事吗？

像这样试试

function toggleSearch(e) {
  if (!e.target.classList.contains('site-head__icn-search') && 
  !e.target.closest('.site-head__icn-search').classList.contains('site- 
  head__icn-search'))
      return false;

var searchBar = document.getElementById("search-bar");
var searchInput = document.getElementById("search-bar-input");

if (searchBar.classList.contains("search-bar--hidden")) {
    searchBar.classList.remove("search-bar--hidden");
    searchBar.classList.add("search-bar--visible");
    searchInput.focus();
} else {
    searchBar.classList.remove("search-bar--visible");
    searchBar.classList.add("search-bar--hidden");
    searchInput.blur();
}

}

<div class="site-head__icn-search" onclick="toggleSearch(event)">
<i class="fas fa-search"></i>

功能切换搜索（e）{
如果（！e.target.classList.contains（'site-head\uu icn-search'）&&
！e.target.closest（'.site-head\uu icn-search'）.classList.contains（'site-
标题（icn-search'））
返回false；
var searchBar=document.getElementById（“搜索栏”）；
var searchInput=document.getElementById（“搜索栏输入”）；
if（searchBar.classList.contains（“searchBar--hidden”））{
searchBar.classList.remove（“搜索栏--隐藏”）；
searchBar.classList.add（“搜索栏——可见”）；
searchInput.focus（）；
}否则{
searchBar.classList.remove（“搜索栏——可见”）；
添加（“搜索栏--隐藏”）；
searchInput.blur（）；
}
}

---

在您的网站上，

i

元素上也有一个单击处理程序。是的，我也注意到了，尽管这不在我的HTML中。我认为我使用的字体库自动添加了这一点。我想知道这是否是问题的一部分。关于如何解决这个问题有什么想法吗？@BrianO'Neill在脚本中使用

addEvenetListener

。不管怎么说，内联事件处理程序是一种糟糕的做法。另外，当只能使用一个类时，为什么要使用两个类呢。只需去掉其中一个（最好是搜索栏--visible），只使用另一个。将默认的

display:flex

添加到

#搜索栏

。您仍然面临这个问题吗？我刚看了一下你的网站，按钮上根本没有活动。我使用控制台添加了它，它按预期工作，您确定添加的是正确的吗？这不是问题所在。问题已经在中说明：他有两个事件侦听器，一个在

上，另一个在其子元素

上，所以请尝试查找最近的“.site-head\uu icn-search”我已经更新了HTML、CSS和JS。现在，所有内容都在addEventListener中注册为单击事件。“onclick”不再出现在HTML中的任何位置。我有一个CSS修改器“搜索栏——隐藏”，而不是一个用于隐藏，一个用于可见。仍然有同样的行为。

function toggleSearch(e) {
  if (!e.target.classList.contains('site-head__icn-search') && 
  !e.target.closest('.site-head__icn-search').classList.contains('site- 
  head__icn-search'))
      return false;

var searchBar = document.getElementById("search-bar");
var searchInput = document.getElementById("search-bar-input");

if (searchBar.classList.contains("search-bar--hidden")) {
    searchBar.classList.remove("search-bar--hidden");
    searchBar.classList.add("search-bar--visible");
    searchInput.focus();
} else {
    searchBar.classList.remove("search-bar--visible");
    searchBar.classList.add("search-bar--hidden");
    searchInput.blur();
}

}

<div class="site-head__icn-search" onclick="toggleSearch(event)">
<i class="fas fa-search"></i>