Question

我一直在使用flexbox创建一个简单的页面，它应该在一次点击时将一个弹性框扩展到页面的大部分。但是，页面偶尔会使所有弹性盒的大小相等（见下图）。当我点击黄色或蓝色部分页面的角落时，我只注意到它。有没有人知道发生了什么？

a picture of the issue

编辑：添加了相关代码并删除了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);
  });
}

Answer 1

我可以告诉你原因，但我无法解决问题（我的JavaScript-fu很弱）。问题是，当您单击h2元素（或可能是页面元素的任何其他后代）时，它会拦截click事件并 it 已应用 selected 类它。由于从所有页面元素中删除了选定的类，因此没有一个被设置为 selected 。

单击我的网页的顶角会导致弹性框行为不当

1 个答案: