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/