如何通过在任何地方单击外部来关闭 div?

Question

我正在研究 alpha.dubaiexporters.com。

http://alpha.dubaiexporters.com/aboutus.aspx

有一个转到按钮，单击该按钮会出现一个搜索面板，我可以在其中执行搜索关键字和类别。

问题是after clicking on go button, search panel appears but if the user does not want to perform any search, he clicks outside anywhere but that search panel does not go.

我尝试了以下代码，其中我编写了javascript代码，但它不起作用。

<header class="header vc_row-fluid vc_col-sm-12">
<div class="top-header vc_col-sm-12">
<div class="logo shadows vc_col-sm-3">
<a href="Default.aspx"><img src="images/layout/check1.png" width="230" height="69" alt="Dubai Exporters" /></a></div>
<div class="menu-btn icon-menu-1"></div>
<div class="header_search"><div class="search sb-search" id="sb-search">
<div class="gray-form">
<input type="text" name="s" class="footer_search_input" onclick="clearInput(this, 'Search');" value="Search" />
<input type="submit" name="search" class="btn btn-primary sb-search-submit" value="Search" />
<span class="sb-icon-search">GO</span>
</div>
</div></div>
<div class="header-search-body">
<div class="header-search-container">
<div class="header-search-form">
<div class="header-form-container" id="mydiv">
<div class="header-input-container"><span class="header-input-title">Keyword:</span>
<input type="text" id="txtkeyword" name="s" runat="server" autocomplete="off">
<div class="clearfix"></div></div>

<div class="header-input-container"><span class="header-input-title">Category:</span>
<input type="text" id="txtserach" list="browsers" name="myBrowser" runat="server" autocomplete="off" causesvalidation="false">
<datalist id="browsers">
<option value="Automotive"/>
<option value="Building and Interiors"/>
<option value="Food, Kitchen and Hotel Supplies"/>
<option value="Industrial and Machinery"/>
<option value="Consumer and Household"/>
<option value="Medical and Healthcare"/>
<option value="Printing , Packaging and Plastic"/>
<option value="IT / Telecom / Electronics"/>
<option value="Oil and Gas"/>
<option value="Power and Energy"/>
</datalist>


<div class="clearfix"></div></div>


<input type="hidden" id="header-post-type" value="gd_place">
<asp:Button ID="Search" class="wpb_button wpb_btn-warning icon-search" style="top:0px;width:70px;height:70px;" Text="Search" runat="server" onclick="doit" OnClientClick="return checkLength();" UseSubmitBehaviour="false" CausesValidation="false" />
<script type="text/javascript">
function checkLength() {
var textbox = document.getElementById('<%=txtkeyword.ClientID%>');
var textbox1 = document.getElementById('<%=txtserach.ClientID%>');
if (textbox.value.length < 3 && textbox1.value.length == 0) {
alert("The entered input should be 3 or more than 3 characters");
return false;
}
}
</script>
<script type="text/javascript">
//window.onload = function () {
//    var hideMe = document.getElementById('mydiv');
//    document.onclick = function (e) {
//        if (e.target.id !== 'mydiv') {
//           // mydiv.style.display = 'none';
//        }
//    };
//};
$(function () {
$("[id*=Search]").click(function (e) {
$("[id*=mydiv]").attr('style', 'display:block');
});
$(document).click(function (e) {
if (!$(e.target).is('[id*=Search]')) {
$("[id*=mydiv]").attr('style', 'display:none');
}
});
});
</script>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<a href="http://cohhe.com/demo/sky/sky-directory/gd-login/" class="header-add-property wpb_button wpb_btn-primary wpb_regularsize">Add Your Listing</a>
<div class="top-menu-container ">
<div class="menu-style"><ul id="menu-menu-2" class="header-menu gd-menu-z">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1759"><a href="Default.aspx">Home</a></li>
<%--<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1767"><a href="advertize.aspx">Advertise</a></li>--%>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1760"><a href="exhibition.aspx">Exhibitions</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1764"><a href="dubaiexhibitions.aspx">Trade Fairs in U.A.E</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1761"><a href="exhibition.aspx">Trade Fairs Worldwide</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1762"><a href="addexhibition.aspx">Add Your Event</a></li>
<%--<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1765"><a href="http://cohhe.com/demo/sky/sky-directory/right-sidebar/">Right sidebar</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1763"><a href="http://cohhe.com/demo/sky/sky-directory/left-sidebar/">Left sidebar</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1766"><a href="http://cohhe.com/demo/sky/sky-directory/typography-2/">Typography</a></li>--%>
</ul>
</li>
<%--<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1767"><a href="http://cohhe.com/demo/sky/sky-directory/blog/">Subscribe</a></li>--%>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1768"><a href="member_benefits.aspx">Memberships</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1768"><a href="aboutus.aspx">About us</a></li>
<%--<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1768"><a href="http://cohhe.com/demo/sky/sky-directory/contact/">Contact</a></li>--%>
</ul></div> </div>


<div class="clearfix"></div>
</div>
<%--<div class="header-background-img"><img src="//cohhe.com/demo/sky/sky-directory/wp-content/uploads/2015/01/header_bg1.jpg" alt="Header bg" /></div>--%>
<div class="header-search-container">
<div id="main_header_bg">
<style type="text/css" media="all">#main_header_image { background: url('images/header02.jpg'); height:150px; background-size: cover !important; background-position: 100% !important; }</style> 
</div>
<div id="main_header_image"></div>

</div>
</header>

Answer 1

您可以使用类名来实现。

$(document).click(function (e) {
if(e.target != $(".sb-icon-search")[0]  && (e.target.parentElement.parentElement != $(".header-form-container")[0])){
$(".header-search-body")[0].style.display = 'none';
}
});
$(".header_search").click(function (e) {
$(".header-search-body")[0].style.display = 'block';
});

如果您使用 id 而不是类名，这将是一种更简单的方法

Answer 2

首先删除/重命名用于标题背景的类"header-search-container"(使用了两次(。 然后在txt关键字，文本搜索和搜索按钮上添加事件侦听器或条件。 例：

// this will hide the search div
$(document).click(function (e) {
var id = e.target.id;
if(id !== 'ctl00_Search' && id !== 'ctl00_txtkeyword' && id !== 'ctl00_txtserach') {
$('.header-search-container')[0].style['display']='none';
}
});

Answer 3

我的印象是，如果条件是根本原因。

if (!$(e.target).is('[id*=Search]')) {...}

您可以在以下条件下尝试吗？

var $box = $('[id*=mydiv]');
//Condition to check if the target is the div or any of its children
// if false then hide the modal
if ($box.has(event.target).length == 0 && !$box.is(event.target) && !$('[name="search"]').is(event.target)) {
$box.attr('style', 'display:none');
}

Answer 4

问题是单击事件向上传播到 dom，然后对父元素执行单击。

若要防止在事件处理程序上返回 false，请执行以下操作：

$(function () {
$("[id*=Search]").click(function (e) {
$("[id*=mydiv]").attr('style', 'display:block');
return false;
});
$(document).click(function (e) {
if (!$(e.target).is('[id*=Search]')) {
$("[id*=mydiv]").attr('style', 'display:none');
return false;
}
});
});