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开发者_C百科>
<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>
<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>
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.
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>
加载中,请稍侯......
精彩评论