Question

编写jQuery的新手，可以使用一些帮助。

我有一个隐藏的div，我想在单击一个表单元素时滑出。但是，当我使用.click()函数时，数据不会被提交，当我使用.submit()函数时，div不会滑出。

我还想知道div是否已经出来然后没有动画。

这可能吗？

感谢。

$(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
});

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

此外，如果您想在提交后将其遗漏，则需要从else语句中删除if块。那只是将它重新拉回来。检查小提琴是否有正确的代码。

Fiddle here

<强>更新

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

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

在表单提交元素上滑出div

1 个答案: