مسج إظهار / إخفاء تبديل

Question

وأنا أحاول إعادة الأثر الذي يظهر على موقع بي بي سي حيث الروابط "إضافة المزيد لهذه الصفحة" و "تحديد موقع" الشريحة مفتوحة عناصر 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>                                                   

ورمز مسج

$(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 وموحية حاليا قبل الشروع في slideDown المقبل باستخدام: محدد المتحركة.

ويحيط علما الطريقة يمكنني استخدام .live أيضا. هذا هو الأفضل من ربط نفسه معالج الأحداث لعناصر متعددة.

وn.b تجاهل القفزة النص لأن هذا هو مجرد وصولا الى عدم وجود المغلق

Answer 2

هل يمكن تعطيل فوق الأحداث عند بدء تشغيل منزلقة وإعادة تمكينه عند انزلاق كاملة. حتى أسهل، يمكنك استخدام متغير عمومي بأنه "قفل". تعيين إلى false عند انزلاق يبدأ، إعادة تعيين إلى صحيح عند انتهائه. لا تسمح لأي انزلاق شعبة عندما متغير غير صحيح. يجب استخدام الاستدعاء لجميع الرسوم المتحركة.

ويمكنك استخدام شيء من هذا القبيل:

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

وجميع الطرق "الرسوم المتحركة" (slideToggle، slideDown) تقبل دالة رد كحجة، وهو ما يسمى عند الانتهاء من تأثير يؤدون.