Question

我正在尝试添加show class的onclick事件，但是，当创建新目标＆＃39;时，我无法显示new-goal-container。点击。

我不希望这是一个切换，只是一个添加类。正如我的代码所示，我试图让它用css做一个快速的淡入淡出外观。有没有更好的方法，因为现在即使没有任何显示div仍然占用空间，当容器不可见时，我希望它看起来好像它不存在。

＆＃13;

$("#new-goal-button").click(function() {
  $("#new-goal-container").addClass("show");
});

＆＃13;

#new-goal-container {
  -webkit-opacity: 0;
  opacity: 0;
  margin-top: 30px;
  border: 1px solid black;
  height: 500px;
  width: 400px;
  padding: 10px;
}
.show {
  -webkit-opacity: 1;
  opacity: 1;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="new-goal-button">Create new goal</div>
<div id="new-goal-container">
  <input type="text" placeholder="Goal Title">
  <textarea placeholder="Goal Description">
</div>

＆＃13;

Answer 1

问题是由于id选择器比class选择器更具体。因此，opacity: 0会覆盖opacity: 1。同时添加id和class选择器，使其具有比原始id选择器更高的特异性。

另请注意，您的textarea元素需要结束标记，理论上transition规则应该在元素的基本规则上，并且仅适用于opacity规则，最后{ <1}}不再需要供应商前缀。

＆＃13;

-webkit-

＆＃13;

$("#new-goal-button").click(function() {
  $("#new-goal-container").addClass("show");
});

＆＃13;

#new-goal-container {
  opacity: 0;
  margin-top: 30px;
  border: 1px solid black;
  height: 500px;
  width: 400px;
  padding: 10px;
  transition: opacity 1s ease-in-out;
}
#new-goal-container.show {
  opacity: 1;
}

＆＃13;

这里也是jsFiddle中的一个工作示例，因为SO Snippets目前似乎已被打破：

Working example

使用onclick addClass显示div

1 个答案: