Slide Down & Slide Up

Question

Ich benutze Slide down & Bis es funktioniert gut. Aber mein Problem ist, wenn Benutzer diese Seite öffnen, schieben sie nach oben, wenn Benutzer klicken, dann nur nach unten rutschen.

<script type="text/javascript"> 
    jQuery(function ($) { 
     $(".block-layered-nav dt").click(function() { 
      if ($(this).next("dd").css("display") == "none") { 
       $(this).next("dd").slideDown(1000); 
       $(this).removeClass("closed"); 
      } else { 
       $(this).next("dd").slideUp(1000); 
       $(this).addClass("closed"); 
      } 
     }); 
    }); 
</script> 

Welche Fehler i

Answer 1

Add Klasse closed mit dem Element getan

Working Demo

jQuery(function($) { 
 
    $('dd').hide() 
 
    $(".navigation dt").click(function() { 
 
    if ($(this).next('dd').is(":visible")) { 
 
     $(this).next('dd').slideToggle('slow').toggleClass('close'); 
 
    } else { 
 
     $(this).next('dd').slideToggle('slow').toggleClass('close'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navigation"> 
 
    <dt>test</dt> 
 
    <dd class="close">sample</dd> 
 
</div>

Answer 2

Sie können einfach $.fn.slideToggle() und $.fn.toggleClass() verwenden, um das Problem der Statuserkennung zu lösen. Lösung:

jQuery(function($) { 
 
    $(".navigation dt").click(function() { 
 
    $(this).next('dd').stop(true, false).slideToggle().toggleClass('close'); 
 
    }); 
 
});

.closed { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navigation"> 
 
    <dt>test</dt> 
 
    <dd class="closed">sample</dd> 
 
</div>

Sie müssen nur von Anfangszustand der Klasse und CSS Anzeigeattribut sicher sein. Und fügte auch $.fn.stop() Funktion hinzu, um Animationsstörungen zu vermeiden.