Question

我有一个div（id="right"），其中包含一个带有提交按钮的表单。单击“提交”后，div应减小其宽度。从我的HTML中删除<form>标记时工作正常，但在表单存在时不起作用。怎么样？

HTML：

<div id="right">
    <form method="POST" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
        ... some input fields here ...
        <input id = "btnRight" type="submit" value="Submit">            
    </form>
</div>

CSS：

#right {
    width: 50%;
    min-width: 35px;
    float: right;
    margin: 0;
    position: relative;
    overflow: hidden;
}

JQuery的：

$(document).ready( function(){
    $('#btnRight').click(function () {
        $('#right').animate({ width: '3%' }, 'slow');   
    });
});

非常感谢任何帮助！

Answer 1

添加preventDefault()

如果调用此方法，则不会触发事件的默认操作。

$(document).ready( function(){
    $('#btnRight').click(function (e) {
    e.preventDefault()
        $('#right').animate({ width: '3%' }, 'slow');   
    });
});

DEMO HERE

Answer 2

对事件使用preventDefault函数，它将取消默认＆＃34;提交＆＃34;事件：

$(document).ready( function(){
    $('#btnRight').click(function (e) {
        e.preventDefault();
        $('#right').animate({ width: '3%' }, 'slow');   
    });
});

与JQuery动画冲突的表单

2 个答案: