Нужна помощь в понимании поведения кликов в моей функции переключения JavaScript

Question

Это должно быть просто, но я не понимаю, почему это не работает, как ожидалось. У меня есть панель поиска, которая по умолчанию имеет класс «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>

И в моем 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>