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

我正在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>

最佳答案

您可以使用类名来实现。

$(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而不是类名，这将是更简单的方法

关于javascript - 如何通过在任何地方单击外部来关闭div？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52776061/