Trouble with Div Hide/Show on mouse click

问题

I tried your script but it isn't working right. I have edited my code below to show exactly what I am working with. Thank you so much for being helpful.

Quazi

Hi,

I am very new to JQuery.

I am trying to get a div to fade in after a click event and then hide after click anywhere. I have three divs set up to do this with css set as display:none. The problem is that the script does not work in IE8 and only works in ff/safari if I double click or triple click the menubar links below.

I am using the following code to show/hide these divs on mouse click:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

body, html { margin:0; padding:0; color:black; background:black; color:black; } #logo { margin-top:1%; width:12%; margin-left:5%; padding:1%; border:2px solid #FF8c00; } #showsbanner { margin-top:1%; width:60%; position:absolute; right:2px; } #wrap { width:90%; margin:0 auto; background:black; color:black; } #header { padding:5px 10px; background:black; color:#ef9c00; } h1 { color:#35002c; font-family:"verdana"; font-size:25px; } h2 { color:#044476; font-family:"verdana"; font-size:18px; } h3 { color:#044476; font-family:"verdana"; font-size:15px; } #nav { padding:5px 10px; width:89%; margin-left:5%; background:#ff8c00; border:2px solid darkblue; } #nav ul { margin:0; padding:0; list-style:none; } #nav li { display:inline; margin:0; padding:0; color:white; }

#menubar {
    float:left;
    width:40%;
    padding:1%;
    background:#ff8c00;
    margin-bottom:1%;
    border:2px solid darkblue;
}
#bcity {

    float:right;
    width:50%;
    padding:1%;
    background:#ff8c00;
    margin-bottom:1%;
    border:2px solid darkblue;
}        
#aicbk {
    display:none;
    float:right;
    width:50%;
    padding:1%;
    background:#ff8c00;
    margin-bottom:1%;    
    border:2px solid darkblue;
}
#pdil{
    display:none;
    float:right;
    width:50%;
    padding:1%;
    background:#ff8c00;
    margin-bottom:1%;
    border:2px solid darkblue;
}
#footer {
    clear:both;
    padding:1px, 1px;
    background:#ff8c00;
    width:100%;
    border:2px solid darkblue;
}
#footer p {
    color:white;
    font-size:12px
}
* html #footer {
    height:1px;
}

//The last four lines are an IE bug fix

</style>

<script type="text/javascript" src="homepage_files/js/jquery-1.3.2.min.js"></script>


<script type="text/javascript">
$(document).ready(function() {
    var gLastH = null;
    var gLastId = null;
    $('.toggleh').hide();

    $('.toggle').click(function(e) {
        $('.toggleh:visible').fadeOut('slow');
        gLastId = $(this).attr('id');
        console.log('#' + gLastId + 'h');
        gLastH = $('#' + gLastId + 'h');
        $(gLastH).fadeIn('slow');
        e.stopPropagation();
    });

    $('*').click(function(e) {
        if ($(this).attr('id') != gLastId) {
            $(gLastH).fadeOut('slow');
        }

        e.stopPropagation();
    });
});
</script>

stuff... text here text here2 text here3 stuff......

    <div class="toggleh" id="toggle2h">

            <div id="aicbk">
                stuff....



            </div>
    </div>


    <div class="toggleh" id="toggle3h">


            <div id="pdil">

                stuff..    

            </div>

    </div>







<div id="footer">

    stuff..

</div>

回答1:

Here's a working sample, tested under Chrome 8.0.552.0 dev:

<html>
<head>
    <title>S.O. 3920865</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var gLastH = null;
        var gLastId = null;
        $('.toggleh').hide();

        $('.toggle').click(function(e) {
            $('.toggleh:visible').fadeOut('slow');
            gLastId = $(this).attr('id');
            console.log('#' + gLastId + 'h');
            gLastH = $('#' + gLastId + 'h');
            $(gLastH).fadeIn('slow');
            e.stopPropagation();
        });

        $('*').click(function(e) {
            if ($(this).attr('id') != gLastId) {
                $(gLastH).fadeOut('slow');
            }

            e.stopPropagation();
        });
    });
    </script>
</head>
<body>
    <div id="menubar">
        <div class="toggle" id="toggle1">
            text here
        </div>
        <div class="toggleh" id="toggle1h">
            some description in here I suppose
        </div>

        <div class="toggle" id="toggle2">
            text here2
        </div>
        <div class="toggleh" id="toggle2h">
            some description in here I suppose 2
        </div>

        <div class="toggle" id="toggle3">
            text here3
        </div>
        <div class="toggleh" id="toggle3h">
            some description in here I suppose 3
        </div>
    </div>
</body>
</html>

Perhaps you need to check jQuery UI accordion which can be what you really want.

EDIT: following 1st comment.

回答2:

Use this simple code to hide/show menu (or any div)

<script type="text/javascript">
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
</script>

<a href="#" onclick="toggle_visibility('foo');toggle_visibility('foo2_too');">Click   here to toggle visibility of element #foo</a>
<div id="foo" style="display:block">This is foo</div>

来源：https://stackoverflow.com/questions/3920865/trouble-with-div-hide-show-on-mouse-click

标签

html

show-hide