我尝试了你的脚本，但它无法正常工作。我编辑了下面的代码以准确显示我正在使用的内容。非常感谢您的帮助。
夸齐
嗨，
我对 JQuery 很陌生。
我试图让 div 在点击事件后淡入，然后在点击任意位置后隐藏。我设置了三个 div 来执行此操作，并将 css 设置为 display:none。问题是，如果我双击或三击下面的菜单栏链接，该脚本在 IE8 中不起作用，并且仅在 ff/safari 中起作用。
我使用以下代码在鼠标单击时显示/隐藏这些 div:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
body ， html{ margin :0； 填充:0； 颜色:黑色; 背景:黑色； 颜色:黑色; } ＃标识 { margin 上限:1%； 宽度:12%； 左边距:5%； 填充:1%； 边框:2px实心#FF8c00； } #showsbanner { margin 上限:1%； 宽度:60%； position:absolute； 右:2px； } ＃裹 { 宽度:90%； margin :0 自动； 背景:黑色； 颜色:黑色; } #标题{ 内边距:5px 10px； 背景:黑色； 颜色:#ef9c00； } h1 { 颜色:#35002c； 字体系列:“verdana”； 字体大小:25px； } h2 { 颜色:#044476； 字体系列:“verdana”； 字体大小:18px； } h3 { 颜色:#044476； 字体系列:“verdana”； 字体大小:15px； } #导航{ 内边距:5px 10px； 宽度:89%； 左边距:5%； 背景:#ff8c00； 边框:2px 实心深蓝色； } #nav ul { margin :0； 填充:0； 列表样式:无； } #nav李{ 显示:内嵌； margin :0； 填充:0； 白颜色; }
#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;
}
//最后四行是IE bug修复
</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>
<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>
最佳答案
这是一个在 Chrome 8.0.552.0 开发环境下测试的工作示例:
<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>
也许您需要检查jQuery UI accordion这可能是您真正想要的。
编辑:以下第一条评论。
关于html - 鼠标点击时 Div 隐藏/显示的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3920865/