شجرة القائمة jQuery ، تنزلق لأعلى/لأسفل

Question

أحاول إنشاء قائمة JQuery Dropdow ، حتى الآن تعمل بشكل جيد. إلا أنه يمكنك فتح المجلدات/الأشجار فقط ، وليس إغلاقها مرة أخرى. أعتقد أنه يجب علي استخدام EQ أو الأشقاء في jQuery؟ لكنني لا أعرف بشكل متكبر كيف أضعها معًا - هل يمكن لأي شخص أن يظهر؟ قون

<ul class="nav">
    <li><a href="#">Test link</a></li>
    <ul class="nav">
        <li>Test under</li>
    </ul>
</ul>

jQuery(document).ready(function(){
    jQuery('.nav ul').css('display', 'none');

    jQuery('.nav li').click(function(){
        jQuery(this).find('ul:first').slideDown(); 
    })

})

// سيمون

Answer 1

هناك خطأ في بناء الجملة مع الترميز الخاص بك - السليل المباشر الصحيح الوحيد من أ <ul> العنصر <li>. إذا كنت تريد أن تعشق قائمتك ، فقم بذلك داخل <li> بحد ذاتها:

<ul class="nav">
    <li>
        <a href="#">Test link</a>
        <ul class="nav">
            <li>Test under</li>
        </ul>
    </li>
</ul>

للتبديل ، نحن ببساطة نوجه البحث عن شقيق <ul> العنصر وتطبيق .slideToggle() طريقة لها عند النقر فوق الرابط:

$(function() {
    // Hide submenus
    $(".nav ul").hide();

    // Toggle nested <ul> (siblings of the link)
    $(".nav > li > a").click(function(e) {
        $(this).siblings("ul").slideToggle();
        e.preventDefault();
    });
});

هنا كمان تجريبي: http://jsfiddle.net/teddyrised/2y9fz/ (تمت إضافة المزيد من عناصر القائمة لإظهار التأثير)

Answer 2

يستخدم slideToggle(); بدلاً من slideDown();, ، هذا سيجعله بحيث يؤدي الانزلاق أو slideup اعتمادًا على الاتجاه الحالي.

Answer 3

هذا يجب أن يساعد

تم تصنيف كل جزء ، لذلك من السهل الفهم. هذا أكثر وعياً وفكرًا من مجرد استخدام slideToggle. بدلاً من ذلك ، يخلق مواقف يجب أن تنزلق لأعلى أو لأسفل بشكل واضح ، ويعود الفروع السابقة عند تحديد آخر.

$('.nav ul').each(function () {
    $(this).on('click', function(e) {
        e.stopPropagation();//ignore ul clicks
    }).parent().on('click', function () {//target only parents of a ul
        if($(this).hasClass('on')) {//if selected
            $(this).addClass('on').children('ul').slideUp();//slideup
        } else {//if not selected
            if($(this).parent('.nav')) {//if start of branch
                $(this).parent().find('.on').removeClass('on').find('ul').slideUp();//close other branches
            }
            $(this).addClass('on').children('ul').slideDown();//slideDown
        }
    });
});

إنه متكرر ، ويستهدف فقط li التي لديها ul طفل. عند تحديد فرع مختلف ، فإنه سيعود أيضًا الفرع الذي تم فتحه مسبقًا. لقد أزلت anchor العلامات ، لأن الإجراء كان على click, والروابط في المثال لم تذهب إلى أي مكان. إذا لم يذهب إلى أي مكان ، فلماذا تحتاج إلى رابط؟

كما أنه يعمل على إصلاح html التنسيق ، لوضع ulS داخل liS ، بدلاً من كونهم أشقاء. بمعنى آخر <li><ul><li></li></ul></li> بدلاً من <li></li><ul><li></li></ul>.

صنع كمان: http://jsfiddle.net/filever10/gml4x/