JavaScript 在单击按钮时添加/删除类时出现问题。它只是不会执行该功能。
通读了许多堆栈溢出解决方案,但没有一个适用于这种特定情况。
这些是元素:
// CSS
.hideWelcome{
display: none;
}
.autoHide {
display: none;
}
// JavaScript Hide Welcome
$(document).ready(function() {
$("#showFormBtn").live("click", function() {
$("#WelcomeDiv").toggleClass("fadeOutUp animated hideWelcome");
$("#formInput").toggleClass("autoHide");
});
});
// Welcome Div
<div class="container">
<div class="row">
<div id="WelcomeDiv" class="one-half column fadeInUp animated" style="margin-top: 25%">
<h4>Make a Difference</h4>
<p>Volunteer today!</p>
<div class="bounceIn animated">
<input type="button" id="showFormBtn" name="showFormBtn" class="button button-primary" value="Sign Up"/>
</div>
</div>
// Div to show
<div id="formInput" class="one-half column fadeInUp animated autoHide" style="margin-top: 25%">
<h4>HELLO YA'LL</h4>
<p>Howdy!</p>
<div class="bounceIn animated">
<input type="button" id="showFormBtn" name="showFormBtn" class="button button-primary" value="Sign Up"/>
</div>
</div>
</div>
</div>
最佳答案
As of jQuery 1.7, the
.live()
method is deprecated. Use.on()
to attach event handlers.
试试这个:
$("#showFormBtn").on("click", function() {
$("#WelcomeDiv").toggleClass("fadeOutUp animated hideWelcome");
$("#formInput").toggleClass("autoHide");
});
关于javascript - 单击按钮添加/删除类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35306772/