A script that tells something to disappaer once I click outside of it on anything

问题

Okay I have a form search on my site that when clicked loads the search results into a hidden iframe that shows. This is the iframe:

<iframe class="slidingDiv" id="frame-content-left2" name="search-box" 
        src="content.html"></iframe>

This is the button that toggles it show state on/off:

<input type="submit" value="Search" class="send-button" />

Now when the above iframe shows the div with page content that the site's navigation links load into disappears. This is the div:

<div id="myDiv">some content here</div>

Now I have a bit of problem because when I click on the navigations on the left you can't see the div that it is loaded into because it is hidden. What I want is to somehow tell the iframe with the search results to disappear once I click outside of it on something, like a link or blank area, making this div:

<div id="myDiv">some content here</div>

reappear.

This is the code that I am using:

<script type="text/javascript">
$(document).ready(function() {

    $('.send-button').click(function() {
        if ($('#frame-content-left2').is(':visible')) {
            $('#frame-content-left2').hide(2000);
            $('#myDiv').show(2000);
        }
        else {
            $('#frame-content-left2').show(2000);
            $('#myDiv').hide(2000);
        }

    });
});

回答1:

Attach a click listener to the document and look at the target for the event. If the target is something that should make the div appear, make it appear.

$(document).click(function(e){
    if(e.target.id !== 'myDiv'){
        $('#myDiv').show();
    }
});

Something to that extent will perform the action you're looking for.

来源：https://stackoverflow.com/questions/11299078/a-script-that-tells-something-to-disappaer-once-i-click-outside-of-it-on-anythin

标签

jquery

ajax

show-hide