刚开始编写 jQuery,需要一些帮助。
我有一个隐藏的 div,我想在单击表单元素时将其滑出。但是,当我使用 .click()
函数时,数据不会被提交,而当我使用 .submit()
函数时,div 不会滑出。
我还希望它知道 div 是否已经出来然后没有动画。
这可能吗?
谢谢。
这是代码。 http://jsfiddle.net/gZWby/23/
$(document).ready(function () {
$('.purchase_button').submit(function () {
if ($("#top_margin").css("top") == "-135px") {
$("#top_margin").animate({
top: "0px"
}, 500);
$("#total_wrap").animate({
top: "0px"
}, 500);
} else {
$("#top_margin").animate({
top: "-135px"
}, 500);
$("#total_wrap").animate({
top: "-135px"
}, 500);
}
return false;
});
});
HTML:
<div id="top_margin"></div>
<form>
<input type="submit" value="Submit" name="smokehouse_1_ATC" class="purchase_button">
</form>
CSS:
#top_margin {
width:100%;
height: 140px;
background-color:orange;
z-index: 10;
position: relative;
/*I would like this div to always be fixed to the top of the browser window*/
top: -135px;
left: 0;
color:#FFF;
padding-top:5px;
}
input.shop_button, input.purchase_button {
width:143px;
background-color:black;
border:none;
color:#74cccc;
padding: 5px 0px;
margin-top:10px;
}
input.shop_button:hover, input.purchase_button:hover {
color:#ff3636;
}
最佳答案
以下答案应该可以解决您的两个问题。
您针对提交的错误元素。您需要将 $('.purchase_button').submit(fn(){...})
更改为:
$('form').submit(function(){
//YOUR CODE HERE
});
原因是按钮本身没有“提交”事件。只有表格可以。因此,我们需要在表单本身而不是按钮上监听“提交”。
此外,如果您想在提交后将其删除,则需要从 if
语句中删除 else
block 。那只是为了将它向上滑动。检查 fiddle 以获得正确的代码。
更新
对此答案的评论指出是什么阻止了您的提交被执行。您的 Javascript 中有一个 return false
,这会阻止提交触发,因为事件监听器在提交实际发生之前被触发。 return false
是在验证失败的情况下防止表单提交的常用方法。
更新 2
如果您想停留在页面上,从而将 slider 移出,您将不得不做一些不同于传统表单提交的事情。传统的提交将依靠 action
方法发布到另一个页面,或者缺少定义的 action 方法,将发布回同一页面。无论哪种方式,您都需要刷新。为了在不发生这种情况的情况下提交表单,我可以建议 jQuery Forms Plugin ?
使用该插件,您的 jQuery 将如下所示:
$(function(){
$('form').ajaxForm(function() {
$("#top_margin").animate({
top: "0px"
}, 500);
$("#total_wrap").animate({
top: "0px"
}, 500);
});
});
你可以把剩下的部分完全切掉。
关于jquery - 在表单提交元素上滑出 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15303033/