1 
<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，我需要能够切换（显示/隐藏）DIVid="ShowGlobalSearchTable"

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

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

我在下面使用 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");                          
         }                   
    });     
});
4

1 回答 1

2

演示：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();
        }


    });
});​
于 2012-06-10T01:36:08.687 回答