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-button1DIVを切り替える（表示/非表示）ことができる必要がありますid="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 に答える