Question

我尝试过你的脚本，但它无法正常工作。我已经编辑了下面的代码，以准确显示我正在使用的代码。非常感谢你的帮助。

自动准

您好，

我是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">

身体， html { 余量：0; 填充：0; 颜色：黑色; 背景：黑色; 颜色：黑色; } ＃商标 { 边距：1％; 宽度：12％; 保证金左：5％; 填充：1％; border：2px solid＃FF8c00; } #showsbanner { 边距：1％; 宽度：60％; 位置：绝对的; 右：2px的; } #wrap { 宽度：90％; 保证金：0自动; 背景：黑色; 颜色：黑色; } #header { 填充：5px 10px; 背景：黑色; 颜色：＃ef9c00; } h1 { 颜色：＃35002c; FONT-FAMILY： “宋体”; 字体大小：25像素; } h2 { 颜色：＃044476; FONT-FAMILY： “宋体”; 字体大小：18像素; } h3 { 颜色：＃044476; FONT-FAMILY： “宋体”; 字体大小：15像素; } #nav { 填充：5px 10px; 宽度：89％; 保证金左：5％; 背景：＃ff8c00; 边框：2px实心深蓝色; } #nav ul { 余量：0; 填充：0; 列表样式：无; } #nav li { 显示：内联; 余量：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错误修复

</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>

东西... 在这打字文字2 文字在这里3 东西......

    <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>

Answer 1

这是一个工作示例，在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>

也许您需要检查jQuery UI accordion这可能是您真正想要的。

编辑：发表第1条评论。

Answer 2

使用此简单代码隐藏/显示菜单（或任何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>

单击鼠标时显示Div隐藏/显示的问题

2 个答案: