Question

我正在尝试制作手机菜单：这是jsfiddle：http://jsfiddle.net/qo81bunh/

在代码中，当您单击按钮以展开菜单时，这是代码：

var channels = [Channel]()
....

for (_, json) in json["entities"] {
    if let channel = Channel(json: json) {
        self.channels += [channel]
    }
}

当你点击＆＃34; X＆＃34;时，这是折叠它的代码：

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

我认为每次点击按钮，都会改变最大高度。

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

如果可能，我怎么能在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/

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

1 个答案: