Javascript 使用动画更改 div 高度 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5531306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change div height onclick with animation
提问by JacobTheDev
I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
我正在尝试使用 div 来创建一个画廊，当您单击它们时，这些 div 会改变它们的高度。理想情况下，这将包括平滑扩展 div 高度的动画。每个页面上的每个 div 都会有多个，因此只需展开该部分即可。
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
它实际上应该变成类似于此页面上的新闻部分的内容：http: //runescape.com/
I'd like to do it with JavaScript/jQuery if possible.
如果可能的话，我想用 JavaScript/jQuery 来做。
回答by Hussein
$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/
在http://jsfiddle.net/tJugd/检查工作示例
回答by JacobTheDev
Here's the code I ended up using:
这是我最终使用的代码：
JS:
JS：
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
CSS：
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
HTML：
<div id="box"></div>
Fiddle:
小提琴：
回答by qwertymk
回答by Trevor Arjeski
jQuery rules. Check this out.
jQuery 规则。看一下这个。
回答by user3649978
The complete solution:
完整的解决方案：
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
间隔 DIV 和内容 DIV 上的边距或填充都有效，但最好仍然有一个间隔 DIV。
Responsive design can be then applied to it in your CSS file. This is mutch better as with JAVA the screen would flicker! If you use a grid system there will be a media query part there you need to include your settings.
然后可以在您的 CSS 文件中应用响应式设计。这更好，因为使用 JAVA 屏幕会闪烁！如果您使用网格系统，则会有一个媒体查询部分，您需要包含您的设置。
I use a little spacer on HD screen while its increasing till mobile screen!
我在高清屏幕上使用了一点间隔，同时它增加到移动屏幕！
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons. Note that animation is for getting rid of flickering of screen.
尽管如此，如果标题中有面包屑，多行可能会很棘手，所以最好有一个 java 但推迟速度响应。请注意，动画是为了消除屏幕闪烁。
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all. Even if java fired its doing its work via an elegant animation
这个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});
};
Note that I have applied a 5px tolerance margin!
请注意，我已经应用了 5px 的容差！
Ho this helps :-)
何这有帮助:-)
回答by bazinga
I know this is old, but if anyone seems to find their way here. @JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
我知道这很旧，但是如果有人似乎在这里找到了方法。@JacobTheDev 的回答很棒，而且没有 jQuery！对于在切换 css 类的同一点未分配事件的用例，我添加了更多内容。
HTML
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}
