首页 新闻 赞助 找找看

{[(急,很急)]}JS隐藏div,用google测试没问题,但是单击图片就是不显示我想要显示的div,问题出在那里?

-2
悬赏园豆:200 [已解决问题] 解决于 2017-07-14 09:47

<!DOCTYPE html>
<html>
<head>
    <title>新建网页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <style>
        .tanchuang{
            float: left;
        }
        .Dd{
            float: left;
        }
    </style>
</head>
    <body>
    
        <center>
            <div id="hd" style="width: 700px;height: 800px;background-color: black;float: left;margin: 50px 50px;">
                <div id="ceshi" style="width: 410px;height: 645px; border: 10px solid gray; float: left;margin: 55px 0px 0px 130px;">
                    <img src="3.jpg" id="openup" onclick="Divs('getD','openup');">
                </div>
            </div>
           <div id="getD" style="width: 100%; height: 100%; background-color: rgba(128,128,128,0.5); display: none;">
                <div>
                    <div class="Dd" style="width: 50px; height: 50px; background-color: yellow;"></div>
                    <div class="Dd" style="width: 800px; height: 50px; background-color: green;"></div>
                    <div class="Dd" id="downD" style="width: 50px; height: 50px; background-color: yellow;" ondblclick="Divs1('downD,getD')"></div>
                    <div class="Dd" style="width: 800px; height: 50px; background-color: green;"></div>
                    <div class="Dd" style="width: 500px; height: 800px; background-color: gray;"></div>
                    <div class="Dd" style="width: 800px; height: 50px; background-color: green;"></div>
                    <div class="Dd" style="width: 50px; height: 50px; background-color: yellow;"></div>
                    <div class="Dd" style="width: 800px; height: 50px; background-color: green;"></div>
                    <div class="Dd" style="width: 50px; height: 50px; background-color: yellow;"></div>
                </div>
            </div>
            <script>
                var a=" "
                var b=" "
                a+=document.body.offsetWidth;
                b+=document.body.offsetHeight;
                document.getElementById("getD").style.width=a;
                document.getElementById("getD").style.height=b;
            </script>
        </center>
        <script>
            function Divs(showid,openuptt)
            {
                var show=document.getElementById(showid);
                var open=document.getElementById(openuptt);
                if (open.style.display=="block")
                {
                    open.style.display="block";
                }
                break;
            }
            function Divs1(showid,downtt)
            {
                var show=document.getElementById(showid);
                var dow=document.getElementById(downtt);
                if(dow.style.display=="block")
                {
                    dow.style.display="none";
                }
            }
    
    </script>
    </body>
</html>

guangalen的主页 guangalen | 初学一级 | 园豆:6
提问于:2017-07-13 16:25
< >
分享
最佳答案
1

这是你的点击事件:onclick="Divs('getD','openup');",其中getD才代表的是下面的div,而openup代表的图片,你下面这个函数明显点击图片的时候操作的是图片本身,完全没有改变下方div的样式

 function Divs(showid,openuptt)
            {
                var show=document.getElementById(showid);
                var open=document.getElementById(openuptt);
                if (open.style.display=="block") 
                {
                    open.style.display="block";
                }
                break;
            }

 

 

可以这么写:

function Divs(showid,openuptt)
{
var show=document.getElementById(showid);
var open=document.getElementById(openuptt);
show.style.display="block";
}

还有,你这个ondblclick事件的传参不对,每个参数分别加''号,或者都不加,你现在相当于只穿了一个参数给这个函数,可以改成

ondblclick="Divs1('downD','getD')"
收获园豆:200
与阳光握手言和 | 菜鸟二级 |园豆:373 | 2017-07-13 16:54

 代码冗余,没什么用的代码就不要加,都删掉,要不然一会你自己就蒙了,还有Divs函数这个break,不要用这个最后改成这样应该就是你要的效果:

function Divs(showid, openuptt) {
    var show = document.getElementById(showid);
    var open = document.getElementById(openuptt);
    if (show.style.display == "none") {
        show.style.display = "block";
     }
    return false;
}
 function Divs1(showid,downtt)
{
    var show=document.getElementById(showid);
    var dow=document.getElementById(downtt);
    if(dow.style.display=="block")
    {
       dow.style.display="none";
    }
}
与阳光握手言和 | 园豆:373 (菜鸟二级) | 2017-07-13 16:59
其他回答(4)
-2

ondblclick="Divs1('downD','getD')"

Master_er | 园豆:53 (初学一级) | 2017-07-13 16:33

什么意思??详细说明一下

支持(0) 反对(0) guangalen | 园豆:6 (初学一级) | 2017-07-13 16:43

@guangalen: ondblclick="Divs1('downD,getD')";ondblclick="Divs1('downD','getD')"

支持(0) 反对(0) Master_er | 园豆:53 (初学一级) | 2017-07-13 16:45
-2

你的标题我实在没读懂你想表达的意思...

好来污影后 | 园豆:287 (菜鸟二级) | 2017-07-13 16:44

我隐藏了一个div,想通过函数来调整div.让他显示.再通过一函数让这个div再次隐藏.在google上测试是没有问题的,但是点击图片时并没有反映.

支持(0) 反对(0) guangalen | 园豆:6 (初学一级) | 2017-07-13 16:47
0
Divs 函数中不要用break,用return false退出函数


<!
DOCTYPE html> <html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css"> <style> .tanchuang { float: left; } .Dd { float: left; } </style> </head> <body> <center> <div id="hd" style="width: 700px;height: 800px;background-color: black;float: left;margin: 50px 50px;"> <div id="ceshi" style="width: 410px;height: 645px; border: 10px solid gray; float: left;margin: 55px 0px 0px 130px;"> <img src="3.jpg" id="openup" onClick="Divs('getD','openup');"> </div> </div> <div id="getD" style="width: 100%; height: 100%; background-color: rgba(128,128,128,0.5);display:none;"> <div> <div class="Dd" style="width: 50px; height: 50px; background-color: yellow;"></div> <div class="Dd" style="width: 800px; height: 50px; background-color: green;"></div> <div class="Dd" id="downD" style="width: 50px; height: 50px; background-color: yellow;" ondblclick="Divs1('downD,getD')"></div> <div class="Dd" style="width: 800px; height: 50px; background-color: green;"></div> <div class="Dd" style="width: 500px; height: 800px; background-color: gray;"></div> <div class="Dd" style="width: 800px; height: 50px; background-color: green;"></div> <div class="Dd" style="width: 50px; height: 50px; background-color: yellow;"></div> <div class="Dd" style="width: 800px; height: 50px; background-color: green;"></div> <div class="Dd" style="width: 50px; height: 50px; background-color: yellow;"></div> </div> </div> </center> </body> </html> <script> var a = " " var b = " " a += document.body.offsetWidth; b += document.body.offsetHeight; document.getElementById("getD").style.width = a; document.getElementById("getD").style.height = b; function Divs(showid, openuptt) { var show = document.getElementById(showid); var open = document.getElementById(openuptt); if (open.style.display == "block") { open.style.display = "none"; } return false; } function Divs1(showid, downtt) { var show = document.getElementById(showid); var dow = document.getElementById(downtt); if (dow.style.display == "block") { dow.style.display = "none"; } } </script>
悟行 | 园豆:12559 (专家六级) | 2017-07-13 16:50

大侠,不行啊.点击后一点反映都没有.就算直接把内容复制出去也不行.

支持(0) 反对(0) guangalen | 园豆:6 (初学一级) | 2017-07-13 17:00

@guangalen: 

function Divs(showid, openuptt) {
        var show = document.getElementById(showid);
        var open = document.getElementById(openuptt);
        if (open.style.display == "none") {
            open.style.display = "block";
        }
        return false;
    }

按你的意思 display应该搞反了,你试试这个

支持(0) 反对(0) 悟行 | 园豆:12559 (专家六级) | 2017-07-13 17:04
0
//修改Divs方法
function Divs(showid,openuptt)
{
var show=document.getElementById(showid);
//点击img控制div的显示隐藏
if (show.style.display == "block") {
show.style.display = "none";
} else {
show.style.display = "block";

}
Supreme` | 园豆:229 (菜鸟二级) | 2017-07-14 09:53
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册