Question

我想用html实现隐藏/显示隐藏/显示，但这样。

这是我的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并展开div left以获取div right的大小然后移动时，我想这样做div center一直到右边。我想用水平动画隐藏/显示它们，例如从左到右或从右到左。玩这些文字可能很棘手，所以我拍了一些小照片，这样你就可以看到我在说什么了：

开始阶段： Start phase

结束阶段： enter image description here

Answer 1

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

或者你可以在这里看到第一个div增加宽度的其他演示.. http://jsfiddle.net/miqdad/3WDbz/1/

Answer 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/

Answer 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>

Answer 4

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

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

仅支持Javascript的解决方案实施起来会更加困难。

如何使用javascript隐藏/显示div

4 个答案: