如何使用 jQuery 關閉該元素的單擊外部元素？

Question

在這里，我試圖通過單擊該元素來關閉元素，但是當我嘗試在文本框中鍵入內容時，它也需要單擊它並關閉。

因此，當我單擊搜索圖標時，該搜索框將打開，並且當我單擊該搜索框輸入內容時，我不會關閉該部分。

當我點擊.search-wrap時，我想關閉該搜索.search-form 。

我嘗試從堆棧溢出中搜索很多東西，但我沒有得到正確的解決方案。

 jQuery('.search-wrap-icon').on('click', function(e){ jQuery(this).parent('.search-wrap').addClass('search-box-open'); e.stopPropagation(); }); jQuery(document).on("click", function(e) { if (jQuery(e.target).is(".search-wrap, .search-form") === false) { jQuery(".search-wrap").removeClass("search-box-open"); } });

 .search-form { position: absolute; left: -21px; top: -13px; opacity: 0; visibility: hidden; }.search-box-open.search-form { opacity: 1; visibility: visible; }.search-form input { width: 243px; height: 50px; border-radius: 4px; background-color: #ebf1f7; padding-left: 55px; }.search-form button { position: absolute; left: 0; top: 0; height: 100%; background: transparent; border: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <div class="search-wrap"> <a href="javascript:;" class="search-wrap-icon"><i class="fa fa-search" aria-hidden="true"></i></a> <div class="search-form"> <form method="get" id="searchform"> <input type="text" value="" name="s" id="s" placeholder="Job type search"> <button tabindex="0" type="submit" id="searchsubmit" value="submit"> <img src="https://i.stack.imgur.com/KwZ3n.png"> </button> </form> </div> </div>

Answer 1

您的問題是，只要您單擊搜索框，您的 e.target 就會成為您的輸入。 相反，您可以檢查元素是否是搜索包裝器本身，或者它是否是帶有.parents()的搜索包裝器的子元素

這是相關的行：

if(!(jQuery(e.target).hasClass("search-wrap") || jQuery(e.target).parents(".search-wrap").length > 0))

---

這是片段：

 jQuery('.search-wrap-icon').on('click', function(e){ jQuery(this).parent('.search-wrap').addClass('search-box-open'); e.stopPropagation(); }); jQuery(document).on("click", function(e) { if(.(jQuery(e.target).hasClass("search-wrap") || jQuery(e.target).parents(".search-wrap").length > 0)) jQuery(".search-wrap");removeClass("search-box-open"); });

 .search-form { position: absolute; left: -21px; top: -13px; opacity: 0; visibility: hidden; }.search-box-open.search-form { opacity: 1; visibility: visible; }.search-form input { width: 243px; height: 50px; border-radius: 4px; background-color: #ebf1f7; padding-left: 55px; }.search-form button { position: absolute; left: 0; top: 0; height: 100%; background: transparent; border: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <div class="search-wrap"> <a href="javascript:;" class="search-wrap-icon"><i class="fa fa-search" aria-hidden="true"></i></a> <div class="search-form"> <form method="get" id="searchform"> <input type="text" value="" name="s" id="s" placeholder="Job type search"> <button tabindex="0" type="submit" id="searchsubmit" value="submit"> <img src="https://i.stack.imgur.com/KwZ3n.png"> </button> </form> </div> </div>