如何使用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;
}

Answer 2

Javascript版本

（与先前添加的JQuery选项相反）：

使用booleans（已测试）：

var fullSize = false; // Used for toggling
var button = document.getElementsByClassName("button")[0]; // Get button
var div = document.getElementsByClassName("footer-sidebar")[0]; // Get div

button.onclick = function() { 
  if(fullSize) { div.style.bottom = 0 + "px"; fullSize = false; } // If div is already 400px...
  else { div.style.bottom = -360 + "px"; fullSize = true; } // If div is already 40px...
};

Fiddle

---

使用classes（未经测试）：

CSS ：

.open {
  height: 400px;
}

.closed {
  height: 40px;
}

的Javascript ：

var button = document.getElementById("button"); // Get button
var div = document.getElementsByClassName("footer-sidebar container")[0]; // Get div

button.onclick = function() {
  if(div.className = "closed") { div.className = "open" }
  else if(div.className = "open") { div.className = "closed" }
  else { div.className = "open" }
}

希望这有帮助。