Html 单击鼠标时隐藏/显示Div时出现问题_Html_Show Hide

Html 单击鼠标时隐藏/显示Div时出现问题

html

Html 单击鼠标时隐藏/显示Div时出现问题,html,show-hide,Html,Show Hide,我试过你的剧本，但效果不好。我在下面编辑了我的代码，以准确显示我正在使用的代码。非常感谢你的帮助夸齐嗨我对JQuery非常陌生我试图在单击事件后获得一个div，使其淡入，然后在单击任意位置后隐藏。我设置了三个div来实现这一点，css设置为display:none。问题是，如果我双击或三次单击下面的菜单栏链接，该脚本在IE8中不起作用，只能在ff/safari中起作用我使用以下代码在鼠标单击时显示/隐藏这些div： <!DOCTYPE HTML PUBLIC "-//W3

我试过你的剧本，但效果不好。我在下面编辑了我的代码，以准确显示我正在使用的代码。非常感谢你的帮助

夸齐

嗨

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

//最后四行是IE错误修复

</style>


$（文档）.ready（函数（）{
var=null；
var gLastId=null；
$（'.toggleh'）.hide（）；
$（'.toggle'）。单击（函数（e）{
$（'.toggleh:visible'）.fadeOut（'slow'）；
gLastId=$（this.attr（'id'）；
console.log（'#'+gLastId+'h'）；
glash=$（'#'+gLastId+'h'）；
$（glash.fadeIn（'slow'）；
e、 停止传播（）；
});
$（'*'）。单击（函数（e）{
if（$（this.attr（'id'）！=gLastId）{
$（glash.fadeOut（'slow'）；
}
e、 停止传播（）；
});
});

东西此处文本此处文本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>


东西
东西
东西

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


S.O.3920865
$（文档）.ready（函数（）{
var=null；
var gLastId=null；
$（'.toggleh'）.hide（）；
$（'.toggle'）。单击（函数（e）{
$（'.toggleh:visible'）.fadeOut（'slow'）；
gLastId=$（this.attr（'id'）；
console.log（'#'+gLastId+'h'）；
glash=$（'#'+gLastId+'h'）；
$（glash.fadeIn（'slow'）；
e、 停止传播（）；
});
$（'*'）。单击（函数（e）{
if（$（this.attr（'id'）！=gLastId）{
$（glash.fadeOut（'slow'）；
}
e、 停止传播（）；
});
});
此处文本
我想这里有一些描述
此处文本2
我想这里有一些描述2
此处文本3
我想这里有一些描述

也许你需要检查一下哪些是你真正想要的

编辑：在第一条注释之后。

使用此简单代码隐藏/显示菜单（或任何div）


功能切换\u可见性（id）{
var e=document.getElementById（id）；
如果（e.style.display=='block'）
e、 style.display='none'；
其他的
e、 style.display='block'；
}
我是福

这是一个超级例子！非常感谢。当然，它工作得很好。我只是想知道是否有可能为三个toggleh类编写脚本，以便从“toggle1”、“toggle2”和“toggle3”加载到单独的div框中。换句话说，我可以在第二个div框中切换1单击以打开切换1，在同一个第二个div框中切换2单击以打开切换2，等等；？当我将toggleh divs移动到另一个框时，代码不起作用。这里的文字这里的文字2这里的文字3然后：东西。。。。。。
东西。。。。stuff..可能是由于您的CSS规则（

display:none；

）

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

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

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