切换显示隐藏 DIV 单击图像保持 DIV 打开关闭单击正文/文档答案

【问题标题】：Toggle Show Hide DIV click image Keep DIV open close on click body/document切换显示隐藏 DIV 单击图像保持 DIV 打开关闭单击正文/文档
【发布时间】：2012-06-10 01:02:05
【问题描述】：

<HTML>
    <BODY> 
        <table id="header-table">
            <tr>
                <td id="globalSearchCell" class="last-child" style="padding-bottom: 0.5em; vertical-align: bottom;">
                    <input class="search-submit-button" id="global-search-submit-button1" type="image" src="image goes here" />           
                </td>
            </tr>
        </table>

        <div id="ShowGlobalSearchTable" style="text-align :right; float:right; display:none;margin-right: 10px">
            <table class="search-box">
                <tr>
                    <td class="search-text-input-container">
                        <input class="search-text-input" id="global-search-criteria" name="criteria" type="text"  maxlength="100"/>
                    </td>
                    <td>
                        <input class="search-submit-button" id="global-search-submit-button" type="image" src="image URL comes here" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="global-search-popup" class="popup-panel">
                            <img id="global-search-progress" src="image url comes here" style="width:16px; height:16px" />
                            <div id="global-search-popup-content" style="text-align:left;"></div>
                        </div>      
                    </td>     
                </tr>    
            </table>                                       
        </div>
    </BODY>
</HTML>

点击图片id : global-search-submit-button1我需要能够用id="ShowGlobalSearchTable"切换（显示/隐藏）DIV

在带有ID : "ShowGlobalSearchTable" 的DIV 内单击任何位置时不应关闭此DIV。

单击主体上的任意位置应关闭 DIV。但是单击图像Id : "global-search-button1" 应该使用ID = "ShowGlobalSearchTable" 切换DIV。

我在下面使用 Jquery 尝试了以下 javascript，但它不起作用，您能否建议更改下面的 Jquery 代码：

$(function () {             
    $('#global-search-submit-button1').click(function () {              
        $('#ShowGlobalSearchTable').toggle();               
    }                   
    $(document).mouseup(function (event) {              
        var target = $(event.target);               
         if (target != $("#global-search-criteria").get(0) && target != $("#global-search-submit-button").get(0) && target != $("#ShowGlobalSearchTable").get(0) && target != $(".search-text-input-container").get(0)) {                            
             $('#ShowGlobalSearchTable').css("display","none");                          
         }                   
    });     
});

【问题讨论】：

标签： jquery jquery-ui jquery-plugins jquery-selectors

【解决方案1】：

演示：http://jsfiddle.net/lucuma/ed6q2/2/

    $(document).ready(function(event) {
    $('#global-search-submit-button1').click(function(event) {
        event.stopPropagation();
        $('#ShowGlobalSearchTable').toggle();
    });

    $(document).click(function(event) {
        var container = $("#ShowGlobalSearchTable");
        var btn = $("#global-search-submit-button1");

        if (container.has(event.target).length === 0 && btn.has(event.target).length === 0) {
            container.hide();
        }


    });
});

【讨论】：

关于为什么要使用 container.has(event.target).length === 0 的任何想法？
是的，如果点击发生在div#ShowGlobalSearchTable 内，那么我们不想隐藏它。那一行就是对那个条件的检查。