我正在做一个日历,我有多个内联显示的Div:
<div class="col-1">
<div id="1" class="drop"></div>
<div id="2" class="drop"></div>
<div id="3" class="drop"></div>
<div id="4" class="drop"></div>
<div id="5" class="drop"></div>
<div id="6" class="drop"></div>
<div id="7"class="drop"></div>
<div id="8" class="drop"></div>
</div>
我希望在单击此Div时调整特定div的大小,所以我在JQuery中创建了一个小脚本来执行此操作:
$('.drop').on('click', function() {
var get_id = $(this).attr('id');
$('#' + get_id).css({"height": "300","width":"300", "background-color": "red"});
});
CSS:
.col-1 div{
height: 100px;
width:100px;
background-color:green;
display:inline-block;
}
但是当我点击Div时,我想重叠所有div,如下所示:
我该怎么做?
答案 0 :(得分:0)
您可以尝试CSS转换:
http://jsfiddle.net/StephanWagner/EuD7x/
var get_id = $(this).attr('id');
$('#' + get_id).css({
"background-color": "red",
transform: 'scale(2)',
});
这将使div保持一致。 但它不会真正使div更大,它只会扩展它,因为CSS声明:)
答案 1 :(得分:0)
另一种方法是使用具有绝对位置的新内部div。然后你只需要添加一个活动的类,其余的就是CSS:
http://jsfiddle.net/StephanWagner/EuD7x/1/
$('.drop').on('click', function() {
$(this).addClass('active');
});
<div class="col-1">
<div id="1" class="drop"><div class="inner">1</div></div>
...
</div>
.col-1 div{
height: 100px;
width:100px;
background-color:green;
display:inline-block;
position: relative;
}
.col-1 .inner {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.col-1 .drop.active .inner {
top: -20px;
left: -20px;
height: 140px;
width:140px;
background-color: red;
z-index: 20;
}