0

我一直在使用 flexbox 制作一个简单的页面，该页面应该在单击时将一个 flex 框扩展到页面的大部分。然而，页面偶尔会使得所有 flexbox 的大小相等（见下图）。我只有在点击页面角落的黄色或蓝色部分时才注意到它。有谁知道发生了什么？

问题的图片

编辑：添加了相关代码并删除了 JS Bin 链接

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home Page</title>
    <link href="/stylesheets/flex.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="yel" class="page selected">
      <h2>Home
      </h2>
    </div>
    <div id="green" class="page">
      <h2>About Me
      </h2>
    </div>
    <div id="red" class="page">
      <h2>Portfolio
      </h2>
    </div>
    <div id="blue" class="page">
      <h2>Playground
      </h2>
    </div>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  -webkit-flex-flow: row;
}
.selected {
  min-width: 90%;
}
#red {
  background-color: #f00;
}
#yel {
  background-color: #ff0;
}
#green {
  background-color: #008000;
}
#blue {
  background-color: #00f;
}
.page {
  flex: 1;
  min-width: auto;
  min-height: 100%;
  -webkit-transition-duration: 750ms;
}
.page h2 {
  font: 20px Helvetica, Tahoma, sans-serif bold;
  color: #ccc;
  -webkit-transform: rotate(90deg);
  margin: 5px;
}
.content {
  margin: 10% auto auto auto;
  padding: 10px;
  width: 90%;
  height: 50%;
  border: 1px solid #000;
}

JS

var $ = function(sel, e) {return (e || document).querySelector(sel)};
var $$ = function(sel, e) {return (e || document).querySelectorAll(sel)};

var boxes = $$('.page');
var links = $$('.nav');
var flexTransitionTo = function flexTransitionTo(el) {
  if(!el.classList.contains('selected')) {
    $('.selected').classList.remove('selected');
    el.classList.add('selected');
  }
};

for(var i = 0; i < boxes.length; i++) {
  var el;
  boxes[i].addEventListener('click', function(event) {
    el = event.target;
    flexTransitionTo(el);
  });
}

for(var i = 0; i < links.length; i++) {
  var el;
  var pageEl;

  links[i].addEventListener('click', function(event) {
    el = event.target;
    pageEl = $(el.dataset.page); //should get the page I want

    flexTransitionTo(pageEl);
  });
}
4

1 回答 1

1

我可以告诉你原因，但我不能给你修复（我的 JavaScript-fu 很弱）。问题是，当您单击 h2 元素（或可能是页面元素的任何其他后代）时，它正在拦截单击事件，并且将所选类应用于它。因为从所有页面元素中删除了选定的类，所以它们都没有设置为selected。

于 2013-07-18T17:53:01.013 回答