Question

这应该很简单，但我不明白为什么它没有按预期工作。我有一个搜索栏，默认情况下，它有一个“搜索栏 - 隐藏”类，它应用“display：none”属性。一类“搜索栏 - 可见”应用“display：flex。”

我有一个功能来切换这些类。

在我的HTML中，我有：

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

在我的JavaScript中，我有：

function toggleSearch() {
    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();
    }
}

当我点击搜索图标时，搜索框会按预期显示。当我再次点击它时，它会消失......但是当我发布第二次点击时，它会再次出现。这几乎就像浏览器以某种方式检测到额外的点击。

您可以在http://www.christmaspast.media

看到所有这些内容

任何人都可以帮我理解发生了什么吗？谢谢！

Answer 1

试试这个

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>

需要帮助了解我的JavaScript切换功能中的点击行为

1 个答案: