javascript - 如何使用onclick按钮更改div下的样式

Question

我已经搜索了很长时间类似的问题，但我所有的搜索都是徒劳的。这是我的代码

<div class="footer-sidebar container" style="height:40px;"></div>
<button class="button">Click</button>

现在，如果有人点击按钮，那么我的 .container 高度应该增加到 400px，如果有人点击同一个按钮，它必须回到 40px。

编辑:(添加 CSS)

.footer-sidebar {
    position: fixed;
    z-index: 1500;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    overflow: hidden;
}

谢谢

Answer 1

您可以像这样向您的 div 添加一个类:

$('.button').on('click', function(){
    $('.container').toggleClass('open');
}

应该避免使用内联样式。使用您的 css 文件并向其中添加如下内容:

.container {
    height: 40px;
}

.container.open {
    height: 400px;
}