如何通过点击外部任何地方关闭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

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

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 3

首先，删除/重命名类‘报头-搜索-容器’，您已经使用了标题背景(它使用了两次)。然后在and关键字、textsearch和Search按钮上添加事件侦听器或条件。示例：

 // 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';
                }
            });