Javascript 使用动画单击时更改div height

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

事实上，应该会出现类似于本页新闻部分的内容：

如果可能的话，我想用JavaScript/jQuery来实现它。

试试看

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

---

jQuery规则。看看这个

检查处的工作示例完整解决方案：

间隔区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公差余量

---

这很有帮助：-）

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

JS:

CSS:

HTML:

小提琴：

---

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

HTML CSS

---

这是可行的，但我决定使用CSS3和JavaScript的组合来实现它。@Jacob你能用你所使用的内容发布一个答案吗？看来这对未来的人也有帮助

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});
};

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

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

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

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

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

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

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

.active {
  height: 100px;
}