Question

正如你在下面看到的..我想在一个隐藏的DIV中嵌入一个简单的HTML表单..我想在点击时显示该div ..折叠DIV并允许用户完成表单..一旦表格提交发生..我想恢复行动，即继续google.com

我停留在滑出并重定向行为..（是否可以强制切换打开，直到表单完成成功？）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;}

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}
</style>
</head>

<body>

<div id="container">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
});
</script>

 <a href="http://www.google.com" class="show_hide">check out google.com!</a><br />
    <div class="slidingDiv">
        <form>
        some form... AJAX post
        </form>
    </div>
</div>

</body>
</html>

Answer 1

所以，您正在寻找触发表单的链接，然后在提交该表单后，继续链接？

您需要禁用链接的默认行为并缓存URL。然后滑动打开表单并允许用户执行任何操作。当用户提交表单（“您确定要离开？”问题或使用AJAX处理的集合表单时），然后继续链接。

你想要的东西（http://jsfiddle.net/Sb6CD/也是如此）：

CSS：

body{
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
}

.slidingDiv {
    display:none;
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

JS：

$(document).ready(function(){
    $('a.show_hide').click(function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
        var url = $(this).attr('href');       
        $('.slidingDiv').slideDown();
        $('form').submit(function() {
            document.location = url;
            return false;
        })
    });
});

Answer 2

我想我得到了你的问题。你只想在滑动完成切换后才能跟踪链接..对吗？

应该这样做：

<script type="text/javascript">
$(document).ready(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(){
        var el_link = $(this);
        $(".slidingDiv").slideToggle(1000, function() {
            document.location.href = el_link.attr('href');
        });
        return false;
    });
});
</script>

或类似的东西......

jQuery href行为（从href链接等待表单完成）

2 个答案: