使用onclick addClass使div出现

Question

我试图做一个添加显示类的onclick事件，但是，当单击“创建新目标”时，我无法显示new-goal-container 。

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

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

 #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; } 

 <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> 

Answer 1

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

还要注意，您的textarea元素需要一个结束标记，理想情况下， transition规则应基于该元素的基本规则，并且仅适用于opacity规则，最后不再需要-webkit- vendor前缀。

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

 #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; } 

 <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"></textarea> </div> 

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

工作实例