Question

当我点击div时，它应该会打开。当我再次点击时，它应该关闭div。请帮帮我。

<html>
    <head>
        <script type="text/javascript">
        var bool = 0;
            function showDiv(){
                if(bool==1){
                    bool=0;
                    document.getElementById(show).style.visibility = "hidden";
                }else if(bool==0){
                    bool=1;
                    document.getElementById(show).style.visibility = "visible";
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="click" onclick="showDiv();" />

        <div="show">
            <p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
        </div>

    </body>
</html>

Answer 1

您错过了id

的getElementById()参数的引号

document.getElementById('show').style.visibility = "hidden";

id

上缺少<div>属性名称

 <div="show">

应该是这样的：

<div id="show">

jsFiddle

Answer 2

试试这个：

<强> HTML

<button id="myButton">Show DIV</button>
<div id="show" class="hidden">
    <p>it is okay </p>
</div>

<强> CSS

.hidden
{
  display:none;
}

<强> JS

$('#myButton').click(function () {
        $("#show").slideToggle();
        $(this).text($(this).text() == 'Show DIV' ? 'Hide DIV' : 'Show DIV');
        return false;
});

这是jsfiddle：http://jsfiddle.net/mgrcic/RbjLJ/

Answer 3

当你提到

时

document.getElementById(show).style.visibility

show指的是变量，但您尝试将其作为字符串获取，因此您应该引用它

document.getElementById('show').style.visibility

Answer 4

以下是解决方案，如果没有指定 div id="theid" ，则无法获取元素：

<html>
    <head>
        <script type="text/javascript">
        var bool = 0;
            function showDiv(){
            var elem = document.getElementById('show');
            console.log(elem);
                if(bool==1){
                    bool=0;
                    elem.style.visibility = "hidden";
                }else if(bool==0){
                    bool=1;
                    elem.style.visibility = "visible";
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="click" onclick="showDiv();" />

        <div id="show">
            <p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
        </div>

    </body>
</html>

Answer 5

你写错了。您应该将“show”作为Id属性的值：

<div id="show"> </div>

如果您使用jQuery（您标记了它），为什么不以unobtrusive方式使用jQuery更干净地完成工作？

$(function(){       
    var bool = 0;
    $("input[type='button']").click(function(){        
        if(bool ==0)
        {
            bool =1
            $("#show").hide();
        }
        else
        {
            bool =0
            $("#show").show();
        }
    });    
});

以下是示例：http://jsfiddle.net/sHsuh/10/

请注意，此脚本会将该函数绑定到页面中的所有按钮元素。所以我会更具体地通过向我的Button添加一个Id并与之绑定：

$("#myButtonId").click(function(){
  //code goes here
});

Answer 6

你犯了一些错误：

<div="show">错了。正确的方法是<div id="show">。
如果您想要显示和隐藏方法，请先将div的CSS设置为visibility:hidden;。
您在document.getElementById('show');中缺少撇号。

试试这个：

    <html>
        <head>
            <script type="text/javascript">
            var bool = 0;
                function showDiv(){
                    if(bool==1){
                        bool=0;
                        document.getElementById('show').style.visibility = "hidden";
                    }else if(bool==0){

                        bool=1;
                        document.getElementById('show').style.visibility = "visible";
                    }
                }
            </script>
        </head>
        <body>
            <input type="button" value="click" onclick="showDiv();" />

            <div id="show" style=" visibility:hidden;">
                <p>it is okay it is okay it is okay it is okay it is okay it is okay it is okay it is okay</p>
            </div>

        </body>
    </html>

点击show div getting error

6 个答案: