我正在研究JavaScript和jQuery,我的问题与HTML页面中的div
有关。鉴于我在HTML页面中使用了2 div
,是否有任何选项可以减少一个div
的大小,并使用onclick
事件扩展另一个div
的大小。我有一个小提琴here,点击后其他div重叠$(function() {
var expanded = false;
$('#sidebar').click(function() {
if (!expanded) {
$(this).animate({'left' : '70px'}, {duration : 400});
expanded = true;
}
else {
$(this).animate({'left' : '565px'}, {duration: 400});
expanded = false;
}
});
});
。
这是我的代码:
{{1}}
答案 0 :(得分:1)
您可以使用以下代码在onclick事件中执行slidingown和slideup
$(function()
{
var expanded = false;
$('#flip').click(function(){
$("#panel").slideToggle("slow");
});
})
处的工作样本
答案 1 :(得分:0)
试试这个,http://jsfiddle.net/markipe/3DpfJ/45/
$(function(){
var expanded = false;
$('#sidebar').click(function(){
if (!expanded)
{
$('#sidebar').animate({width:'69%'}, 400);
$('#steam').animate({width:'29%'}, 400);
expanded = true;
}
else
{
$('#sidebar').animate({width:'29%'}, 400);
$('#steam').animate({width:'69%'}, 400);
expanded = false;
}
});
});
答案 2 :(得分:0)
如果您反之亦然,请查看DEMO http://jsfiddle.net/yeyene/3DpfJ/47/
$('#sidebar').click(function(){
$(this).animate({width:'100px'}, 400);
$('#steam').animate({width:'500px'}, 400);
});
$('#steam').click(function(){
$(this).animate({width:'100px'}, 400);
$('#sidebar').animate({width:'500px'}, 400);
});
答案 3 :(得分:0)
在下面的演示中,我们可以添加n个div子节点" mainContainer" div请检查DEMO
http://jsfiddle.net/mahesh2524/RqJt7/6/
<div id="mainContainer">
<div id="steam"></div>
<div id="sidebar" class="sidebar"></div>
<div id="sidebar2" class="sidebar"></div>