1

编写 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;
}
4

1 回答 1

2

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

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

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

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

此外，如果您想在提交后将其排除在外，则需要从您的语句中删除该else块。if那只是为了将其滑回。检查小提琴以获取正确的代码。

在这里提琴

更新

对此答案的评论指出是什么阻止了您的提交被执行。您的 Javascript 中有一个return false，它可以防止在提交实际发生之前触发事件侦听器时触发提交。这return false是在验证失败的情况下防止表单提交的常用方法。

更新 2

如果您想留在页面上，并因此将滑块保持在外面，您将不得不做一些传统的表单提交以外的事情。传统的提交将依赖于一个action方法来发布到另一个页面，或者缺少定义的操作方法，将返回到同一页面。无论哪种方式，您都必须刷新。为了在不发生这种情况的情况下提交表单，我可以建议使用jQuery Forms Plugin吗？

使用该插件，您的 jQuery 将如下所示：

$(function(){
   $('form').ajaxForm(function() { 
     $("#top_margin").animate({
            top: "0px"
        }, 500);
        $("#total_wrap").animate({
            top: "0px"
        }, 500); 
   });
});

你可以把它的其余部分完全去掉。

于 2013-03-08T21:19:27.917 回答