基於選擇器幫助的JQuery SlideUP和SlideDown

Question

我在教自己的jQuery，並試圖找出它的樂趣。如果需要，我使用slideDown和slideUp函數來顯示和消失不同的<div>。但我的問題在於刪除。我可以選擇不同的選項單獨出現，但是，如果兩個<div>都顯示在我嘗試刪除<div>中的一個時，則兩個<div>都會快速閃爍，然後都會消失。當<div>只顯示其中一個時也會發生。我點擊刪除鏈接，兩個<div>的閃光燈快速消失。我真的不知道爲什麼。這個代碼背後的想法是允許用戶根據需要添加和移除。如果選擇是錯誤的，用戶將能夠刪除它，而以前選擇的其他選擇保持可見。這是我的代碼：

<div class="type-select" style="width:400px;"> 
<select name="selectStatus"> 
<option selected value="Select">Select...</option> 
<option id="login">Login</option> 
<option id="nav">Navigation</option> 
</select></div> 
<div id="loginselect"><img src="http://triplemsystems.ekkosolutions.com/images/global/bg-loginPages.gif" height="47" width="162" /> 
<a id="remove" href="">Remove</a></div> 
<div id="navselect"><img src="http://triplemsystems.ekkosolutions.com/images/global/bg-navMain.gif" height="45" width="90"/> 
<a id="removenav" href="">Remove</a></div> 
<script> 
$("#loginselect").hide("fast"); 
$("select").change(function(){ 
    if($("#login").is(":selected")){ 
     $("#loginselect").slideDown("slow");} 
}); 
$("#remove").click(function() { 
    $("#loginselect").slideUp("slow"); 
}); 

$("#navselect").hide("fast"); 
$("select").change(function() { 
    if($("#nav").is(":selected")){ 
     $("#navselect").slideDown("slow");} 
}); 

$("#removenav").click(function() { 
    $("#navselect").slideUp("slow");}); 

</script> 

我是否在正確的道路上？

Answer 1

您是在正確的道路上，我認爲的問題是，你不能阻止鏈接的默認操作，所以頁面被刷新（導致你看到div S表示第二）。您可以阻止鏈接的默認操作，接受一個event參數，並呼籲.preventDefault()就可以了，即：

$("#remove").click(function(e) { 
    e.preventDefault(); 
    $("#loginselect").slideUp("slow"); 
}); 

這是工作：http://jsfiddle.net/XzDzb/