Implementierung von slideToggle in jQuery

Question

Ich bin ein Neuling mit jQuery und ich versuche, diese SlideToggle-Funktion herauszufinden. Wie ich will, dass es funktioniert, wenn du auf #toolsnav klickst, verschiebt sich das # tool-dropdown div nach unten, was perfekt funktioniert. Aber das Problem ist, dass das # tools-dropdown-div nicht hochgeht, wenn ich auf die anderen nav divs klicke, es bleibt unten, bis ich es erneut anklicke. Dank Ihrer Hilfe:)

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#toolsnav").click(function() { 
      $(".tools-dropdown").slideToggle("fast");    
     }); 
     $("#showsnav").click(function() { 
      $(".shows-dropdown").slideToggle("fast");    
     }); 
     $("#blognav").click(function() { 
      $(".blog-dropdown").slideToggle("fast");    
     }); 
     $("#aboutnav").click(function() { 
      $(".about-dropdown").slideToggle("fast");    
     }); 
     $("#joinnav").click(function() { 
      $(".join-dropdown").slideToggle("fast");    
     });  
}); 
</script> 

       <nav id="main"> 
       <ul> 
        <li><a href="#" id="toolsnav">Tools</a></li> 
        <li><a href="#" id="showsnav">Shows</a></li> 
        <li><a href="#" id="blognav">Blog</a></li> 
        <li><a href="#" id="aboutnav">About</a></li> 
        <li><a href="#" id="joinnav">Join</a></li>    
       </ul>   
      </nav> 

Answer 1

$(document).ready(function() { 
    $("#toolsnav, #showsnav, #blognav, #aboutnav, #joinnav").on('click', function() { 
     $('[class$="-dropdown"]').not('.'+this.id.replace('nav','')+'-dropdown').slideUp(); 
     $('.'+this.id.replace('nav','')+'-dropdown').slideToggle(); 
    }); 
}); 

FIDDLE

Um die Farbe der Links zu ändern, wenn sie aktiv sind Sie jQuery CSS() Methode verwendet werden könnte, oder einfach nur eine Klasse verwenden, etwa so:

$(this).toggleClass('active').parent().siblings().children('a').removeClass('active'); 

Es wäre einfacher, alle Links zu targetieren, wenn sie alle die gleiche Klasse hätten, aber die obige Methode sollte auch gut funktionieren.

Answer 2

$(document).ready(function() { 
    $('#main ul li a').click(function(){ 
     var dropdown = $(this).attr('id').split('nav'); 
     $('.' + dropdown [0] + '-dropdown').slideToggle('fast'); 
    }); 
}) 

dass all

Answer 3

Eine einfache Lösung :-) ist, ist es vorherige geklickt Rutsche und wechseln zu speichern.

<script type="text/javascript"> 
$(document).ready(function() { 
    var prevSlide; 

     $("#toolsnav").click(slideFunc(".tools-dropdown")); 
     $("#showsnav").click(slideFunc(".shows-dropdown")); 
     $("#blognav").click(slideFunc(".blog-dropdown")); 
     $("#aboutnav").click(slideFunc(".about-dropdown")); 
     $("#joinnav").click(slideFunc(".join-dropdown")); 

    function slideFunc(target) 
    { 
     return function() 
     { 
      if(prevSlide && target != prevSlide) 
       $(prevSlide).slideToggle("fast"); 
      else 
       prevSlide = null; 

      $(target).slideToggle("fast"); 
      prevSlide = target; 
     } 
    } 
}); 
</script> 

<nav id="main"> 
    <ul> 
     <li><a href="#" id="toolsnav">Tools</a></li> 
     <li><a href="#" id="showsnav">Shows</a></li> 
     <li><a href="#" id="blognav">Blog</a></li> 
     <li><a href="#" id="aboutnav">About</a></li> 
     <li><a href="#" id="joinnav">Join</a></li>    
    </ul>   
</nav>