如何使用 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>