Jquery Show / Hide Toggle - PullRequest
Новая
       11

Jquery Show / Hide Toggle

0 голосов
/ 24 июня 2009

Я пытаюсь воссоздать эффект, показанный на домашней странице 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;
        });
    });     
});

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

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

Ответы [ 2 ]

5 голосов
/ 24 июня 2009

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

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

n.b Игнорировать скачок текста, так как это просто из-за отсутствия css

1 голос
/ 24 июня 2009

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

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

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

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

...