jQuery slideDown et slideUp basculer les problèmes

Question

Donc, fondamentalement, je commence juste avec jQuery et JS et j'ai rencontré un problème.

J'ai un petit menu qui lorsque l'utilisateur clique sur l'un des liens, le contenu glisse vers le bas. S'il y a déjà une boîte ouverte, elle glisse vers le haut. Mon problème est que lorsque vous cliquez sur le même lien pour le refermer, il glisse vers le haut, mais parce que le code de jQuery lui dit de redescendre, c'est le cas. Cela signifie que vous ne pouvez jamais fermer un seul morceau de contenu une fois que l'un d'eux est ouvert.

Mon code jQuery est:

jQuery(document).ready(function(){ 

    jQuery(".radius5").hide(); 

    jQuery("a#contact-btn").click(function() { 
     jQuery(".radius5").slideUp(); 
     jQuery("div#contact").slideDown("slow"); 
    }); 

    jQuery("a#about-btn").click(function() { 
     jQuery(".radius5").slideUp(); 
     jQuery("div#about").slideDown("slow"); 
    }); 

    jQuery("a#portfolio-btn").click(function() { 
     jQuery(".radius5").slideUp(); 
     jQuery("div#portfolio").slideDown("slow-up"); 
    }); 

}); 

et le code HTML (simplifié bien sûr):

<a id="contact-btn" class="btn-slide" href="#">Contact</a> 
    <a id="about-btn" class="btn-slide" href="#">About</a> 
    <a id="portfolio-btn" class="btn-slide" href="#">Portfolio</a> 

    <div id="contact" class="radius5">Contact Us</div> 
    <div id="about" class="radius5">About Us</div> 
    <div id="portfolio" class="radius5">Our Portfolio</div> 

J'ai aussi un lien jsFiddle.

Je suis sûr que c'est vraiment facile de répondre. J'ai essayé d'utiliser addClass et removeClass mais je n'arrivais pas à le comprendre. Quelqu'un peut-il aider?

Cordialement,

Tom Oakley

Answer 1

Je tweak votre code HTML légèrement pour garder une trace des éléments devraient afficher/cacher en utilisant la propriété href (par le commentaire de @ PowerBuoy):

<a id="contact-btn" class="btn-slide" href="#contact">Contact</a> 
<a id="about-btn" class="btn-slide" href="#about">About</a> 
<a id="portfolio-btn" class="btn-slide" href="#portfolio">Portfolio</a> 

<div id="contact" class="radius5">Contact Us</div> 
<div id="about" class="radius5">About Us</div> 
<div id="portfolio" class="radius5">Our Portfolio</div> 

Ensuite, votre JavaScript devient beaucoup plus simple:

$(document).ready(function() { 

    $(".radius5").hide(); 

    $("a.btn-slide").click(function(e) { 
     e.preventDefault(); 

     var $menu = $($(this).attr("href")); 

     $(".radius5").slideUp(); 

     if ($menu.is(":hidden")) { 
      $menu.slideDown("slow"); 
     } 
    }); 
}); 

Exemple:http://jsfiddle.net/zLqYn/

Vous pouvez également jeter un oeil à slideToggle, mais je remarque que vous utilisez des durées différentes selon que vous glisser vers le haut ou vers le bas. Si les durées sont les mêmes (par exemple, vous faites glisser vers le haut et vers le bas avec une durée de "slow"), vous pouvez rendre le code encore plus court en utilisant slideToggle.

Answer 2

Tout ce que vous devez faire est de supprimer l'élément en cours de la sélection $(".radius5") afin qu'il ne soit pas glissé. Vous pouvez également rendre votre code plus compact en manipulant tous les click événements dans un gestionnaire d'événements:

$(function(){ 

    //cache the `.radius5` selector so it doesn't have to be re-calculated in the event handler 
    var $radius5 = $(".radius5").hide(); 

    //bind a `click` event handler to all three of your buttons, notice to select multiple items we just put a comma in between the selectors 
    $("#contact-btn, #about-btn, #portfolio-btn").click(function() { 

     //get the ID of the element to slideDown 
     var slide_down = "#" + this.id.replace('-btn', ''); 

     //slideUp all but the current element 
     $radius5.not(slide_down).slideUp(); 

     //slideDown the current element 
     $(slide_down).slideDown("slow"); 
    });     
}); 

Voici une démo: http://jsfiddle.net/ePRsz/5/

MISE À JOUR

Je viens de relire votre question et si vous voulez que l'élément en cours de glissement glisse vers le haut si son lien de nav est cliqué à nouveau, vous pouvez changer .slideDown() pour :

$(function(){ 

    var $radius5 = $(".radius5").hide(); 

    $("#contact-btn, #about-btn, #portfolio-btn").click(function() { 
     var slide_down = "#" + this.id.replace('-btn', ''); 
     $radius5.not(slide_down).slideUp(); 
     $(slide_down).slideToggle("slow"); 
    });     
}); 

Voici une démo: http://jsfiddle.net/ePRsz/13/