HTML

Question

我正在尝试使用div来创建一个库，当你点击它们时会改变它们的高度。理想情况下，这将包括平滑扩展div高度的动画。每个页面上都会有几个div，因此只需扩展该部分。

这实际上应该是这个页面上的新闻部分：http://runescape.com/

如果可能，我想用JavaScript / jQuery来做。

Answer 1

$('div').click(function(){
    $(this).animate({height:'300'})
})

检查http://jsfiddle.net/tJugd/

处的工作示例

Answer 2

以下是我最终使用的代码：

JS：

document.getElementById("box").addEventListener("click", function() {
    this.classList.toggle("is-active");
});

CSS：

#box {
    background: red;
    height: 100px;
    transition: height 300ms;
    width: 100px;
}

#box.is-active {
    height: 300px;
}

HTML：

<div id="box"></div>

小提琴：

https://jsfiddle.net/cp7uf8fg/

Answer 3

尝试

$('div').toggle(function(){
    $(this).animate({'height': '100px'}, 100);
}, function(){
    $(this).animate({'height': '80px'}, 100);
});

<强> DEMO

Answer 4

jQuery规则。看看这个。

http://api.jquery.com/resize/

Answer 5

完整的解决方案：

内容DIV上的间隔DIV和边距或填充都有效，但最好还是有间隔DIV。

然后可以在CSS文件中将响应式设计应用于它。随着JAVA屏幕闪烁，这变得更好！如果您使用网格系统，那么您需要在其中包含媒体查询部分。

我在高清屏幕上使用了一个小间隔，而它在移动屏幕上一直在增加！

仍然如果你在标题中有多个行中的痕迹可能会很棘手，所以最好有一个java但是延迟了速度。请注意，动画是为了摆脱屏幕的闪烁。

如果面包屑很长，那么这个java只会触发，否则通过网格应用单个CSS并且根本不会闪烁。即使java通过优雅的动画解雇了它的工作

var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;    

if (header_height > spacer_height) {
    $('#header_spacer').animate({height:header_height});
};

请注意，我已经应用了5px容差！

这有助于： - ）

Answer 6

我知道这是旧的，但如果有人似乎在这里找到了自己的路。 @JacobTheDev答案很棒，没有jQuery！对于在切换css类的同一点没有分配事件的用例，我添加了一些。

HTML

<div id='item' onclick='handleToggle()'> </div>

JS

handleToggle(event){    
  document.getElementById(event.target.id).classList.toggle('active')
}

CSS

#item {
  height: 20px;
  transition: 1s;
}

.active {
  height: 100px;
}

使用动画更改div高度onclick

6 个答案:

检查http://jsfiddle.net/tJugd/

HTML

JS

CSS