首页 新闻 会员 周边 捐助

{[(急,很急)]}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
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。