jQuery的HREF行爲

正如你可以看到下面..我想在一個隱藏的DIV嵌入一個簡單的HTML表單..我想上顯示點擊該分區（從HREF鏈接形式完成等待）..摺疊出DIV並允許用戶填寫表格。一旦表單提交情況..我想恢復行動，即進行到google.comjQuery的HREF行爲

我卡在滑出和重定向行爲.. （是否有可能迫使撥動開到形式完成成功？）

<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>

來源

2011-09-28 patrick

所以，你要尋找的是觸發形式的鏈接，然後該表單被提交後，T o繼續鏈接？

您需要禁用鏈接的默認行爲並緩存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; 
     }) 
    }); 
});

來源

2011-09-28 20:42:05 rooney

我錯過e.stopImmediatePropagation（）;感謝魯尼！ – patrick

我覺得我得到了你的問題。只有在切換完成後，您纔想要關注鏈接..對吧？

這應該就像這樣：

<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>

或者這樣的事情...

來源

2011-09-28 20:48:08 Alex

jQuery的HREF行爲

回答

相關問題