0

当我单击 时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>
4

6 回答 6

1

您缺少id参数的引号getElementById()

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

也id缺少属性名称<div>

 <div="show">

应该是这样的：

<div id="show">

jsFiddle

于 2012-04-14T19:24:08.537 回答
1

试试这个：

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/

于 2012-04-14T19:34:31.923 回答
0

当你提到

document.getElementById(show).style.visibility

show指的是一个变量，但你试图将它作为一个字符串，所以你应该把它引用

document.getElementById('show').style.visibility
于 2012-04-14T19:27:07.900 回答
0

这是解决方案，如果不指定，您将无法获取元素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>
于 2012-04-14T19:30:50.470 回答
0

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

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

如果你使用 jQuery（你标记了它），为什么不使用 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
});
于 2012-04-14T19:35:41.600 回答
0

你犯了一些错误：

  1. <div="show">是错的。正确的方法是<div id="show">。
  2. 如果你想要显示和隐藏手段，首先将你的 div 的 CSS 设置为visibility:hidden;.
  3. 您在 中缺少撇号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>
于 2012-04-14T21:54:42.683 回答