如果在外部单击，则隐藏元素

Question

如果我单击搜索栏元素以外的任何位置（输入和提交按钮），我想要关闭搜索栏。到目前为止，我所做的是使用切换来打开和关闭它，这是有效的。但是，如果我单击 div 之外的任何位置，到目前为止我找不到关闭它的方法。 代码笔：https://codepen.io/hateusall/pen/abdedJE

HTML：

<header>
         <div class="container-fluid">
            
              <div class="navbarCustom pleft pright ">
               <div class="navbar-brand">
                  <img src="./images/x.png" alt="x" class="header-logo">
               </div>
               <ul class="list-unstyled d-xl-flex align-items-center navbar-custom">
                  <li class="dropdown " >Lorem Ipsum</li>
                  <li class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem Ipsum </li>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  <a class="dropdown-item" href="#">Lorem Ipsum</a>
                  <a class="dropdown-item" href="#">Lorem Ipsum</a>
                  <a class="dropdown-item" href="#">Lorem Ipsum</a>
  </div>
                  <li> Lorem Ipsum</li>
                  <li> <button class="btn-wpp"> Whatsapp </button></li>
                  <li class="position-relative wrapper-bar">
                    <div class="search-icon search-toggler">
                    <i class="fas fa-search search"></i></div>
                 <div class="search-wrapper" >
                     <form action="#" class="">
                         <input type="text" placeholder="Search" class="search-input" id="info">
                          <button class="border-0 bg-dark text-white p-2 btn-search"><i class="fas fa-search" id="info2"></i></button>
                     </form>
                 </div>
                 
                </li>
             
               </ul>
               <div class="navbar-toggler text-white d-xl-none">
                  <span class="line line1"></span>
                  <span class="line line2"></span>
                  <span class="line line3"></span>
               </div>
            </div>
         </div>
      </header>

    const searchToggler = document.querySelector(".search-toggler");
       const searchWrapper = document.querySelector(".search-wrapper");
  
       searchToggler.addEventListener("click", function(e){
          
 
       if ( !$(event.target).hasClass('search-toggler')) {
         $(searchWrapper).toggleClass("search-wrapper-active");
          close();
    } 

});
    function close() {
      if (!$(event.target).hasClass('search-wrapper-active')) {
         $(document).click(function(e){
            /* here i would remove active classes */
           console.log("test")
         })
      }
    }
}

Answer 1

你可以这样做：

    [...document.querySelectorAll('body')].forEach(el => {
//get all elements in body
      el.addEventListener('click', event => {
//add addEventListener
        if (event.target.className.includes("search") === false) {
//if clicked element does not have class search
          searchWrapper.classList.remove("search-wrapper-active");
//remove search-wrapper-active class to close it
        }
  })
})

这样你就不需要其他任何东西了，只需将其组合在一起即可关闭并打开（也有好处，仅使用 JS）：

const searchWrapper = document.querySelector(".search-wrapper");
[...document.querySelectorAll('body')].forEach(el => {
  el.addEventListener('click', event => {
    if (event.target.className.includes("search") === false) {
      searchWrapper.classList.remove("search-wrapper-active");
    } else {
      searchWrapper.classList.toggle("search-wrapper-active");
    }
  })
})

现在记住：

现在您在页面上的所有元素上都有事件监听器，如果您需要它来做其他事情，只需扩展它以满足您的需要，无需在任何地方再次添加事件监听器。

const searchWrapper = document.querySelector(".search-wrapper");
[...document.querySelectorAll('body')].forEach(el => {
  el.addEventListener('click', event => {
    if (event.target.className.includes("search") === false) {
      searchWrapper.classList.remove("search-wrapper-active");
    } else {
      searchWrapper.classList.toggle("search-wrapper-active");
    }
  })
})

html {
  height: 100%;
}

body {
  min-height: 100%;
}

.search {
  cursor: pointer !important;
  z-index: 99999;
  position: relative;
}

.search-active {
  cursor: pointer;
  z-index: 99999;
  transition: .4s all ease-in-out;
  pointer-events: all !Important;
}

.search-input {
  z-index: 99999;
}

.search-image {
  cursor: pointer;
  z-index: 99999;
}

.search-submit {
  z-index: 99999999999999999999;
  cursor: pointer !important;
  position: relative;
  pointer-events: all !Important;
}

.toggler-image {
  z-index: 9999;
  position: relative;
  color: #000;
}

.search-input {
  border-radius: .2rem;
  padding-left: 16px;
  z-index: 9;
  position: relative;
  transition: .3s ease-in-out all;
}

.search-toggler {
  z-index: 99;
  position: relative;
  transition: .3s ease-in-out all;
}

.search-wrapper {
  opacity: 0;
  pointer-events: none;
  transition: .3s ease-in-out all;
  position: absolute;
}

.search-wrapper-active {
  transform: translateY(35px);
  pointer-events: all;
  opacity: 1;
  transition: .3s ease-in-out all;
}

.btn-search {
  position: absolute;
  left: 100%;
  height: 45px;
  width: 50px;
}

header {
  background-color: #000;
  width: 100vw;
  padding: 32px 0px;
}

.pleft {
  padding-left: 380px;
}

.custom-cont {
  padding-left: 380px;
  padding-right: 280px;
}

.pright {
  padding-right: 280px;
}

.navbarCustom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header li {
  color: #fff;
  margin-right: 49px;
  font-size: 16px;
  font-family: var(--mbold);
  cursor: pointer;
}

header li:hover {
  color: #4aba58;
  transition: .3s;
}

header ul {
  margin-bottom: 0;
}

.btn-wpp {
  background-color: #4aba58;
  border: none;
  padding: 17px 21px;
  font-size: 16px;
  color: #fff;
  border-radius: .4rem;
  transition: .4s;
}

.btn-wpp:hover {
  filter: brightness(120%);
  transition: .4s;
}

.cart-value {
  background-color: var(--verdeClaro);
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  border-radius: 50%;
  font-size: 13px;
  transform: translate(80%, -80%);
}

.cart-value:hover {
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <section class="wrapper">
    <header>
      <div class="container-fluid">

        <div class="navbarCustom pleft pright ">
          <div class="navbar-brand">
            <img src="./images/x" alt="x" class="header-logo">
          </div>
          <ul class="list-unstyled d-xl-flex align-items-center navbar-custom">
            <li class="dropdown ">Lorem </li>
            <li class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem Ipsum </li>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Lorem Ipsum</a>
              <a class="dropdown-item" href="#">Lorem Ipsum</a>
              <a class="dropdown-item" href="#">Lorem Ipsum</a>
            </div>
            <li> Lorem </li>
            <li> <button class="btn-wpp"> Whatsapp </button></li>
            <li class="position-relative wrapper-bar">
              <div class="search-icon search-toggler">
                <i class="fas fa-search search">toggler</i> </div>
              <div class="search-wrapper">
                <form action="#" class="">
                  <input type="text" placeholder="Pesquisar" class="search-input" id="info">
                  <button class="border-0 bg-dark text-white p-2 btn-search"><i class="fas fa-search" id="info2"></i></button>
                </form>
              </div>

            </li>
            <li class="cart position-relative">
              <div class="cart-value">1</div>
              <img src=".//images/carrinho.png" alt="">
            </li>
          </ul>
          <div class="navbar-toggler text-white d-xl-none">
            <span class="line line1"></span>
            <span class="line line2"></span>
            <span class="line line3"></span>
          </div>
        </div>
      </div>
    </header>

    <h1>TEST
      <h1>

Answer 2

DEMO

const $toggler = $(".search-toggler");
const $wrapper = $(".search-wrapper");

$toggler.on("click", function() {
  $wrapper.toggleClass("search-wrapper-active");
});

$(document).on('click', function (e) {
  if ($(".search-toggler, .search-wrapper").has(e.target).length === 0) {
    $wrapper.removeClass("search-wrapper-active");
  }
});