jquery - 在表单提交元素上滑出 div

Question

刚开始编写 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;
}

Answer 1

以下答案应该可以解决您的两个问题。

您针对提交的错误元素。您需要将 $('.purchase_button').submit(fn(){...}) 更改为:

$('form').submit(function(){ 
 //YOUR CODE HERE
});

原因是按钮本身没有“提交”事件。只有表格可以。因此，我们需要在表单本身而不是按钮上监听“提交”。

此外，如果您想在提交后将其删除，则需要从 if 语句中删除 else block 。那只是为了将它向上滑动。检查 fiddle 以获得正确的代码。

Fiddle here

更新

对此答案的评论指出是什么阻止了您的提交被执行。您的 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); 
   });
});

你可以把剩下的部分完全切掉。