如何使用 javascript 隐藏/显示 div答案

【问题标题】：How to hide/show div with javascript如何使用 javascript 隐藏/显示 div
【发布时间】：2012-06-19 11:52:34
【问题描述】：

我想用html中的div实现隐藏/显示，但是用这种方式。

这是我的html：

<div id="left"></div>
<div id="middle"> 
<input type="button" id="button"/>
</div>
<div id="right"></div>

这是我的 CSS：

body 
{ 
 height: 100%; 
 margin: 0; 
 padding: 0 ;
 border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
 float:left;
 width:11%;
 height:570px;
 margin:0;
}

我想这样做，当我单击 div center 上的按钮以隐藏 div right 并扩展 divleft 以获得 div right 的大小，然后将 div center 一直移动到正确的。我想用水平动画隐藏/显示它们，例如从左到右或从右到左。玩这些词可能会很棘手，所以我做了一些小图片，这样你就可以真正看到我在说什么：

开始阶段：

结束阶段：

【问题讨论】：

还有whathaveyoutried.com?
您可以轻松隐藏调用function hideDiv(id, state) { document.getElementById(id).style.display = state; } 之类的函数的 div。现在，移动到左侧 div 以获取其余空间，width:100% 不会这样做吗？
@antyrat 我只尝试了显示/隐藏，因为我是 javascript 新手，所以我无法正确设置，所以我只是在这里提出了详细的问题。

标签： javascript css html show-hide

【解决方案1】：

你可以在这里看到一个工作演示...http://jsfiddle.net/miqdad/3WDbz/

或者您可以在此处查看增加第一个 div 宽度的其他演示 ..http://jsfiddle.net/miqdad/3WDbz/1/

【讨论】：

这正是我想要的
我只是在创造那种类型的小提琴，感谢上帝刷新这个问题，看看它已经完成了）
一个问题，如果我有其他方式怎么办。以 div right hidden 开头，然后在按钮上显示它？如何更改代码？我也需要更改 css 吗？

【解决方案2】：

几天前我有几乎同样的问题，也许它也对你有帮助。此示例使用复选框来隐藏 div。并将另一个 div 设为 100% 宽度。

javascript, When right div is hidden left div has to be 100% width.

示例中的 javascript 代码：

$(function() {
    $("#foo").on("click",function() {
        if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
            $('#checked-b').css("width","60%");
            $('#checked-a').css("width","40%");
        }) ;
        else $('#checked-a').show('fast',function(){
           $('#checked-b').css("width","100%").show();         
           $('#checked-a').css("width","0%").hide();

        });
    });
});

还有一个例子： http://jsfiddle.net/mplungjan/5rdXh/

【讨论】：

【解决方案3】：

这是使用 JavaScript 隐藏 div 元素的最佳方法之一：

<html>
<head>
    <script>
      function hideDiv() {
      document.getElementById("myP2").style.visibility = "hidden";
      }
    </script>
</head>
<body>
    <button onClick="hideDiv()">Hide</button>
    <br>
    <br>
    <p id="myP2">Hello world!</p>
</body>
</html>

【讨论】：

【解决方案4】：

用 JQuery 实现很容易。看看这个 JSFiddle 示例：http://jsfiddle.net/q39wv/2/

（对所有人：通常我不会在这里只放一个 JSFiddle 链接，但这次我认为值得向 OP 展示整个事情是如何工作的，并对他的 HTML 和 CSS 进行一些调整）。

仅 Javascript 的解决方案将更难以实施。

【讨论】：