如何使用onclick on按钮更改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;
}