Question

所以我试图用flexbox创建一个简单的侧面导航... 当点击蓝色div ..我希望红色div从宽度变化＆＃34; flex＆＃34; 0到1是＆＃34; 50％＆＃34; .... 我的代码如下，但我还要包括一个代码...

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>

P.S。这解决了你的问题，但如果你保留document.ready回调并在.blue选择器里面添加一个点击监听器，而不使用html挂钩，那就更好了。

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

Answer 2

您的clickBlue功能位于另一个功能中，因此无法在文档中访问。尝试在同一范围内通过jQuery添加它。例如，在声明函数后，请尝试：

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

将其从HTML的“onclick”中删除。

Answer 3

问题是你的函数clickBlue未定义。

您可以将事件监听器添加到蓝色div中，如下所示：

代码段：

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

.container {
  background: rgba(0, 0, 0, .1);
  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"></div>
  <div class="red"></div>
</div>

onclick属性不适用于flexbox

3 个答案: