Jquery Показать/Скрыть переключатель

Question

Я пытаюсь воссоздать эффект, показанный на домашней странице BBC, где ссылки «добавить больше на эту страницу» и «установить местоположение» открывают соответствующие элементы div и показывают соответствующее содержимое.Если вы выберете «Добавить еще на эту страницу», откроется раздел «Добавить еще».Если вы снова выберете «Добавить еще на эту страницу», раздел «Добавить еще» закроется.Однако если раздел «Добавить еще» открыт и вы выбираете «Установить местоположение», раздел «Добавить еще» сдвигается вверх, а затем вниз по выбору «Установить местоположение».

Мне удалось воссоздать этот эффект, используя следующий код:

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>                                                   

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;
        });
    });     
});

Проблема в том, что если кто-то нажимает на первую ссылку, а затем быстро нажимает на вторую, оба элемента div отображаются на странице.Всегда должен отображаться только один раздел.Есть идеи, как я могу решить эту проблему?

Спасибо за помощь.

Answer 1

быстрая демонстрация для вас здесь.По сути, вы можете проверить, анимируется ли какой-либо из элементов div в данный момент, прежде чем переходить к следующему слайду вниз, используя селектор :animated.

Также обратите внимание на то, как я использую .live.Это предпочтительнее, чем привязывать один и тот же обработчик событий к нескольким элементам.

n.b Не обращайте внимания на текстовый переход, так как это связано с отсутствием CSS.

Answer 2

Вы можете отключить события щелчка при начале скольжения и снова включить его после завершения скольжения.Еще проще: вы можете использовать глобальную переменную в качестве «замка».Установите значение false, когда начинается скольжение, и установите значение true, когда оно заканчивается.Не разрешать скольжение для любого элемента div, если переменная имеет значение false.Вы должны использовать обратные вызовы для всех анимаций.

Вы можете использовать что-то вроде этого:

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

Все «анимационные» методы (slideToggle, слайдDown) принимают в качестве аргумента функцию обратного вызова, которая вызывается после завершения выполняемого ими эффекта.