动态改变div宽度的Javascript

Question

谁能帮我创建一个 javascript？

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

1) 左 div 宽度 85%
2) 右侧 div 宽度 15%

所以我想更改左侧 div 的宽度。比如，如果我删除或隐藏右侧的 div，左侧的 div 宽度应该使用 javascrpt 动态调整为 100%。

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:UPDATED - 恢复正确的 div

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

});