我怎样才能实现,当绿色框变大时,蓝色框填充div的剩余位置并动态降低其高度?
http://jsfiddle.net/trek711/ncrqb/4/
HTML
<div id="wrap">
<div id="left"></div>
<div id="righttop">
<div id="click">Click!</div>
<div id="box"></div>
<div id="place"></div>
</div>
<div id="rightbot"></div>
</div>
CSS
#wrap {
padding: 5px;
width: 700px;
height: 500px;
background-color: yellow;
border: 1px solid black;
}
#left {
float: left;
margin: 0 5px 0 0;
width: 395px;
height: inherit;
background-color: red;
}
#righttop {
float: left;
padding: 5px;
width: 290px;
background-color: green;
}
#rightbot {
float: left;
margin: 5px 0 0 0;
width: 300px;
height: 60%;
background-color: blue;
}
#click {
width: 50px;
height: 50px;
background-color: red;
}
#box {
display: none;
width: 200px;
height: 100px;
background-color: white;
}
#place {
width: 100px;
height: 120px;
background-color: lightgrey;
}
JS
$("#click").on("click", function (e) {
$("#box").slideToggle("fast");
});
非常感谢!
答案 0 :(得分:3)
不幸的是,你无法通过CSS实现这一目标。但是,slideToggle确实有一个回调,您可以使用它来调整事物的进展
$("#box").slideToggle(
{ duration: "fast",
progress: function() {
$('#rightbot').height(
$('#wrap').height()
- $('#righttop').height()
- 15 /* margins */)
}
});
并在JSFiddle
唯一的丑陋是利润率。但是,也许有可能以编程方式找到它们。
这是唯一允许平滑调整蓝框大小的方法
答案 1 :(得分:0)
$("#click").on("click", function (e) {
$("#box").slideToggle("fast");
$("#rightbot").height($("#left").height() - $("#rightbot").height());
});
我使用#left
div的高度作为100%的值。
其他方法是使用overflow:hidden
包装div。
解决方案取决于您的使用案例。
答案 2 :(得分:0)
怎么样:
$("#click").on("click", function (e) {
var height = "63%",
$box = $("#box"),
$blueBox = $("#rightbot");
if($box.is(":visible")){
$box.hide("fast");
$blueBox.height(height);
return;
}
height = "43%";
$box.show("fast");
$blueBox.height(height);
});
在这里工作小提琴:http://jsfiddle.net/ncrqb/15/
我希望它有所帮助。
答案 3 :(得分:0)
$("#click").on("click", function (e) {
$("#box").slideToggle("fast");
if($("#rightbot").height()==300)
$("#rightbot").height("43%");
else
$("#rightbot").height("300");
});
这是fiddle
答案 4 :(得分:0)
以下代码将解决问题: -
$("#click").on("click", function (e) {
$("#box").slideToggle("fast",function(){
var bluedivHeight = 300;//$("#rightbot").height() if want to have dynamic
var toggleBoxHeight = $("#box").height();
if($("#box").css("display")==="block"){
$("#rightbot").height(bluedivHeight-toggleBoxHeight);
} else {
$("#rightbot").height(bluedivHeight);
}
});
});
答案 5 :(得分:0)
function centerBlue(){
var blue = $("#rightbot");
var parent = $("#left");
var rightTop = $("#righttop");
var left_space = (parent.outerHeight() - rightTop.outerHeight()) - 5;
blue.css("height",left_space+"px");
console.log(rightTop.outerHeight());
}
这是解决方案,并且有效。
所有这些答案都是正确的,但他们忘记了你需要在动画完成后重新调整蓝框的大小,否则jQuery将返回幻灯片状态的先前高度。
这是因为,jQuery使用window.setTimeout()进行动画制作;这就是为什么它不会阻止代码,只有动画完成。