Question

<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");                          
         }                   
    });     
});

Answer 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();
        }


    });
});

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

1 个答案: