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

首先删除/重命名您用于标题背景的类“ header-search-container”（已使用两次）。 然后在txtkeyword，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';
                }
            });

Answer 4

问题在于click事件会在dom上传播，然后在父元素上执行click。

为防止您应在事件处理程序上返回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;
        }
    });
});