javascript - 单击元素外部时更改 CSS 高度

Question

我正在尝试制作移动菜单: 这是 jsfiddle:http://jsfiddle.net/qo81bunh/

在代码中，当你点击按钮展开菜单时，代码如下:

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

当你点击“X”时，这里是折叠它的代码:

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

我想每次你点击按钮时，它都会改变最大高度。

我的问题是，当您单击按钮/“X”以外的其他地方时，您如何做到这一点，如果菜单打开，它将关闭菜单。谢谢

如果可能，我如何在 css 中做到这一点？如果不是，jquery？

Answer 1

您需要使用 javascript(或 jquery)通过在单击文档时添加事件监听器来实现这一点。然后它可以检查菜单是否处于事件状态(在您的情况下检查输入)，然后关闭它。

document.addEventListener('click', function(e){
  var btn = document.querySelector('.menu-btn');
  if (btn && btn.checked) {
    btn.click();
  }
});

我已经编辑了你的 jsfiddle http://jsfiddle.net/qo81bunh/1/