当前位置： 文江博客话题详情

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

发布于 2024-09-26 21:34:31 字数 3770 浏览 3 评论 0原文

我尝试了你的脚本，但它不能正常工作。我编辑了下面的代码以准确显示我正在使用的内容。非常感谢您的帮助。

Quazi

嗨，

我对 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%； 边框：2px实心#FF8c00； } #showsbanner { 保证金上限：1%； 宽度：60%； 位置：绝对； 右：2px； } ＃裹 { 宽度：90%； 保证金：0 自动； 背景：黑色； 颜色：黑色; } #标题{ 内边距：5px 10px； 背景：黑色； 颜色：#ef9c00； } h1 { 颜色：#35002c； 字体系列：“verdana”； 字体大小：25px； } h2 { 颜色：#044476； 字体系列：“verdana”； 字体大小：18px； } h3 { 颜色：#044476； 字体系列：“verdana”； 字体大小：15px； } #导航{ 内边距：5px 10px； 宽度：89%； 左边距：5%； 背景：#ff8c00； 边框：2px 实心深蓝色； } #nav ul { 保证金：0； 填充：0； 列表样式：无； } #nav李{ 显示：内嵌； 保证金：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>

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>

原文

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

末が日狂欢 2024-10-03 21:34:31

这是一个在 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 其中可以是你真正想要的。

编辑：以下第一条评论。

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.

回复 原文
北方的韩爷 2024-10-03 21:34:31

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

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>
回复 原文
~没有更多了~

关于作者

我家小可爱

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文