Jquery Show / Hide Toggle

Question

J'essaie de recréer l'effet affiché sur la page d'accueil de la BBC lorsque les liens "ajouter plus à cette page" et "définir l'emplacement" ouvrent leurs divs correspondants et affichent leur contenu pertinent. Si vous sélectionnez "Ajouter plus à cette page", la section "Ajouter plus" s'ouvre. Si vous sélectionnez à nouveau «ajouter plus à cette page», la section «ajouter plus» se ferme. Toutefois, si la section "Ajouter plus" est ouverte et que vous sélectionnez "Définir l'emplacement", elle fait glisser la section "Ajouter plus" vers le haut avant de faire défiler la sélection "Définir l'emplacement".

J'ai réussi à recréer cet effet à l'aide du code suivant:

HTML

    <ul id="demo">
        <li><a href="#sectionOne">Link One <span class="rm">this site</span></a></li>
        <li><a href="#sectionTwo">Link Two</a></li>
        <li><a href="#sectionThree">Link Three</a></li>                 
    </ul>

    <div id="siteCustomisation">
        <div class="siteSelection" id="sectionOne">
            <h3>Section One</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue tincidunt tortor, id condimentum massa scelerisque id. Cras elit magna, posuere at sollicitudin in, tristique nec turpis.</p>
        </div>
        <div class="siteSelection" id="sectionTwo">
            <h3>Section Two</h3>
            <p>Maecenas condimentum tincidunt pretium. Ut est ipsum, pharetra quis congue eu, eleifend vitae velit. Vestibulum quam purus, posuere quis vehicula ut, sollicitudin vel urna.</p>
        </div>
        <div class="siteSelection" id="sectionThree">
            <h3>Section Three</h3>
            <p>Nulla id nisi eget urna gravida euismod. Mauris tempor, diam ullamcorper sagittis eleifend, urna mauris scelerisque massa, placerat sagittis massa augue nec purus.</p>
        </div>                                  
    </div>                                                   

Code Jquery

$(function(){
    $("#siteCustomisation .siteSelection").hide();

    $("#demo li a").each(function(index) {
        $(this).click(function() {  
            var id = $(this).attr('href');
            var $thisDiv = $(id);

            if ($thisDiv.siblings(':visible').length) { 
                $thisDiv.siblings(':visible').slideUp(700, function() {
                    $thisDiv.slideDown();
                });
            } else {    
                $thisDiv.slideToggle();         
            }
            return false;
        });
    });     
});

Le problème est que, si quelqu'un clique sur le lien un, puis le lien deux rapidement, les deux divs sont ensuite affichés sur la page. Une seule section doit être affichée à tout moment. Des idées pour résoudre ce problème?

Merci pour votre aide.

Answer 1

une démonstration rapide pour vous ici . Fondamentalement, vous pouvez tester si l'un des div est en train d'animer avant de passer au prochain slideDown à l'aide du sélecteur: animated.

Notez également la façon dont j'utilise .live. Cela est préférable à l’attachement du même gestionnaire d’événements à plusieurs éléments.

n.b Ignore le saut de texte car il s’agit simplement du manque de css

Answer 2

Vous pouvez désactiver les événements de clic lorsque vous commencez le glissement et le réactiver une fois le glissement terminé. Encore plus facilement, vous pouvez utiliser une variable globale comme "verrou". Définissez-le sur false lorsque le glissement commence, réinitialisez-le sur true à la fin. Ne permettez pas de glisser pour tout div lorsque la variable est false. Vous devez utiliser des rappels pour toutes les animations.

Vous pouvez utiliser quelque chose comme ceci:

animationStarted = true;
$thisDiv.slideToggle(function() {   
   animationStarted = false; 
});

Toutes les "animations" Les méthodes (slideToggle, slideDown) acceptent une fonction de rappel en tant qu'argument, qui est appelé lorsque l'effet qu'elles effectuent est terminé.