0

我想用 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并为 div的大小right扩展 div然后将 div一直向右移动时，我想这样做。我想用水平动画隐藏/显示它们，例如从左到右或从右到左。玩这些词可能会很棘手，所以我做了一些小图片，这样你就可以真正看到我在说什么：leftrightcenter

开始阶段： 开始阶段

和结束阶段： 在此处输入图像描述

4

4 回答 4

4

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

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

于 2012-06-19T12:01:51.043 回答
1

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

javascript，当右 div 被隐藏时，左 div 必须是 100% 宽度。

示例中的 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/

于 2012-06-19T13:37:51.907 回答
1

这是使用 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>
于 2015-04-04T02:32:02.387 回答
0

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

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

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

于 2012-06-19T12:01:22.810 回答