Question

有人可以帮我创建一个javascript吗？

让我解释一下，我有2个div

1）左边宽度为85％
2）右边宽度为15％

所以有什么我想改变左div的宽度。比如，如果我删除或隐藏右边的div，左边的div宽度应该是100％动态的javascrpt。

Answer 1

我使用JavaScript完成了它：

WORKING : Demo 1

UPDATED : Demo 2

UPDATED : Demo 3：使用CSS过渡动画幻灯片进/出。

<强> HTML

<div class="wrapper">
<span class="div1"></span><span class="div2"></span>

</div>
<button>Remove</button>

CSS：更新

html, body {
    width:100%;
    margin:0;
}
.wrapper {
    width:100%;
    display:inline-block;
    height:auto;
    float:left;
}
.div1 {
    display:inline-block;
    width:85%;
    height:40px;
    background:#333;
}
.div2 {
    display:inline-block;
    width:15%;
    height:40px;
    background:green;
}
 /*ADDED BELOW LINES*/

 .div1, .div2
 {
  /* Change Seconds(here it's 0.5s) as per your requirement */
  -webkit-transition: all 0.5s ease-in-out; 
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
 }

 .addRemoveContent
 {
   width:100%;
 }

 .addRemoveMenu
 {
   width:0;
 }

<强> JS

$("button").click(function () {
    $(".div2").hide(10);
    $(".div1").css("width", "100%");

});

JS：更新 - 将正确的div带回来

$("button").click(function () {
    $(".div2").toggleClass("addRemoveMenu");
    $(".div1").toggleClass("addRemoveContent");

});

Answer 2

以下是CSS解决方案的演示：http://jsfiddle.net/yf3e5bhv/

这种方法的优点是您的模板是声明性的。您可以为应用程序的每个状态创建一个纯HTML页面。在我看来，这极大地有助于开发和维护。

HTML

<input type="button" value="toggle" id="button" /><br /><br />
<div id="left"></div><div id="right"></div>

CSS

#left, #right {
    width: 50%;
    background-color: #ff0000;
    height: 50px;
    float: left;
}
#right {
    background-color: #00ff00;
}
body.hide-right #right {
    display: none;
}
body.hide-right #left {
    width: 100%;
}

JS

var state = false;
document.getElementById("button").addEventListener("click", function () {
    var classname = "";
    if (state === false) {
        classname = "hide-right";
    }
    document.body.className = classname;
    state = !state;
});

如果您使用像jQuery这样的库，则可以显着减少此代码：

$("#button").on("click", function () {
    $(document.body).toggleClass("hide-right");
});

Answer 3

您可以使用CSS和JavaScript执行此操作。快速而肮脏的方式：

.dynamic {
     margin-right: 0;
}

将div设置为具有margin-right，然后在隐藏div时使用JavaScript应用此类。

function hideDiv(id, outerdiv) {
  document.getElementById(id).style.display = 'none'; //hide the right div
  $("#outdiv").addClass("dynamic"); //make the other div fill the space
}

Answer 4

没有任何jQuery膨胀的简单解决方案。适用于Chrome，FF和IE 5-11等。

只需将浮动和宽度样式应用于右侧DIV即可。单击左侧DIV以在85％和100％之间切换宽度。

＆＃13;

<html>
<body>
    <style type="text/css">
        div {height: 10em; border: 1px blue solid; }
        #right { width: 15%; float: right; background-color: lightgreen; }
    </style>
<div>
    <div id="right"> </div>
    <div onclick="toggle()">click me</div>
</div>
<script type="text/javascript">
    function toggle() {
        var s = document.getElementById('right').style;
        s.display = s.display ? '' : 'none';
    }
</script>   
</body>
</html>

＆＃13;

Javascript动态更改div宽度

4 个答案: