javascript - onclick 属性不适用于 flexbox

Question

所以我正在尝试使用 flexbox 创建一个简单的侧边导航...单击蓝色 div 时，我希望红色 div 的宽度“flex”从 0 变为 1，即“50%”......我的代码在下面，但我还将包括一个代码笔...

HTML

<div class="container flex">
<div class="blue" onclick="clickBlue();"></div>
<div class="red"></div>
</div>

CSS

.container{background:rgba(0,0,0,.1); width:100%; height:100px;}
.blue{background:rgba(0,0,250,.2); flex:1; height:100px;}
.red{background:rgba(250,0,0,.4); flex:1; height:100px;}
.flex{display:flex; justify-content:center; align-items:center;}

JS

$(document).ready(function(){
function clickBlue(){ 
$(".red").css("flex","1");
}
});

http://codepen.io/gebrutommy/pen/bwEGBv

Answer 1

问题是您在就绪回调中定义了 clickBlue，因此它的作用域不是全局的，所以您不能从全局作用域中引用它。要解决此问题，请在全局范围内定义 clickBlue。没有 document.ready 功能。

function clickBlue() {
  $(".red").css("flex", "1");
}

.container {
  background: rgba(0, 0, 0, .1);
  width: 100%;
  height: 100px;
}
.blue {
  background: rgba(0, 0, 250, .2);
  flex: 1;
  height: 100px;
}
.red {
  background: rgba(250, 0, 0, .4);
  flex: 0;
  height: 100px;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container flex">
  <div class="blue" onclick="clickBlue();"></div>
  <div class="red"></div>
</div>

附言这解决了您的问题，但如果您保留 document.ready 回调并在内部的 .blue 选择器上添加点击监听器，而不使用 html 钩子(Hook)，效果会更好。

$('.blue').on('click', clickBlue);