نشر jQuery وفئات متعددة

Question

-- تحديث --

لقد كنت غبيًا بعض الشيء، حيث كانت UL التابعة للطفل تغطي قائمة الوالدين (تلاشي العتامة)، لذلك لم أتمكن من النقر فوق المجموعات بعد النقر عليها مرة واحدة.أُووبس!على أية حال شكرا لمساعدتي يا رفاق!

---

مشكلة نشر jQuery هي مشكلة يتصارع معها الجميع.ولكن هذه هي حالتي التي لا يمكنني العثور على مكان لإصلاحها (أو ربما أكون غبيًا لعدم النظر إلى الأماكن الصحيحة أو أن مهاراتي في jQuery ليست جيدة بما يكفي لفهمها).

الحالة الأساسية هي أن لدي بعض المجموعات، وفي المجموعات هناك عدة خيارات.عند النقر على إحدى المجموعات، ستظهر الخيارات.ولكن، عندما أقوم بالنقر فوق أحد الخيارات، يتم تشغيل النشاط المنبثق بالكامل مرة أخرى، لأنهم أطفال أحد الوالدين، وبالتالي فهو يتعرف على الفصل الذي تم القبض على الأطفال فيه.

يبدو HTML الخاص بي كما يلي:

<div id="buttons">
        <ul>
            <li class="group">Group 1
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 2
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 3
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 4
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
        </ul>
</div>

أعتقد أن هذا يبدو بسيطًا جدًا ولا يوجد خطأ في ذلك على ما أعتقد.إنها مجرد قوائم متداخلة داخل القوائم.

ولكن بعد ذلك رمز jQuery الخاص بي.تبدو هكذا:

$(".group").click(function(event) {

    // if ($(event.target).is('ul li ul li')) return false;

    $(".group").children("ul").animate({top: 0, opacity: 0}, 200);
    var liHeight = ($(this).children("ul").children("li").height())+20;
    var totalOptions = $(this).children("ul").children("li").length;
    var combinedHeight = totalOptions * liHeight;
    var slideIn = -(16+combinedHeight) // formula doing math on slidedistance
    $(this).children("ul").animate({
                            top: slideIn,
                            opacity: 1
                        }, 600);

    /*
    $(".link").click(function(event) {
        event.stopPropagation();
    });
    */

});

ما يفعله في الواقع هو:

1. إعادة تعيين أطفال المجموعة إلى الموضع العلوي الافتراضي
2. الحصول على المجموعة التي تم النقر عليها
3. الحصول على ارتفاع إجمالي الطفل للمجموعة المستهدفة
4. تحضير المسافة للرسوم المتحركة
5. إطلاق الرسوم المتحركة

ليست هناك مشكلة في ذلك وكل شيء يعمل كما أريد، ولكن عندما أنقر على liق داخل ulحسنًا، إنها تستمر في تشغيل الرسوم المتحركة، وهذا ليس جزءًا من الخطة.

لقد قمت بالتعليق على كتلتين من التعليمات البرمجية كما لاحظت.هاتان طريقتان مختلفتان للتحكم في الانتشار وجدتهما أثناء تعثر الإنترنت بسبب مشكلة نسبية في الإجابة.كلاهما لا يعطي نتيجة جيدة بالرغم من ذلك.ما يحدث هو أن النشر يتوقف فعليًا، ولكنه يجعله أيضًا غير قادر على النقر فوق مجموعات مختلفة.

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

أيضًا، إذا لم تتمكن من العثور على أي إجابات ولكن لديك بعض التعليقات حول ترميز الكود أو شيء من هذا القبيل، فنحن نرحب بذلك أيضًا (أنا طالب في تصميم التفاعل/تطوير الويب، لذا سأكون ممتنًا لذلك أيضًا :))

Answer 1

يجب عدم تثبيت معالج النقر على .group العنصر، ولكن فقط على عنصر التبديل.

<li class="group">
    <a class="toggle">Group 2</a>
    <ul>
        <!-- contents to show & hide -->
    </ul>
</li>

$(".toggle").click(function(e) {
    $(this).next()... // to reference the ul
})

Answer 2

فقط قم بنقل الكود التالي خارج .group معالج النقر:

$(".link").click(function(event) {
    event.stopPropagation();
});

الكود الكامل:

$(".group").click(function(event) {

    // if ($(event.target).is('ul li ul li')) return false;

    $(".group").children("ul").animate({top: 0, opacity: 0}, 200);
    var liHeight = ($(this).children("ul").children("li").height())+20;
    var totalOptions = $(this).children("ul").children("li").length;
    var combinedHeight = totalOptions * liHeight;
    var slideIn = -(16+combinedHeight) // formula doing math on slidedistance
    $(this).children("ul").animate({
                            top: slideIn,
                            opacity: 1
                        }, 600);
});


$(".link").click(function(event) {
   event.stopPropagation();
});

Answer 3

أود أن أقترح طريقة بديلة ل click المستمع.إذا كنت تستخدم on طريقة في jQuery - يمكنك تفويض المستمع إلى العنصر الفرعي.مثل ذلك:

$('#buttons').on('click', 'li', function(e){
    var li = $(this);

    if(li.hasClass('group')){
        alert('group was clicked');
    }
    else if(li.hasClass('link')){
        alert('link was clicked');
        e.stopPropagation();
    }
});

يوجد مثال حي لهذا الكود هنا - http://jsfiddle.net/skip405/YWzxB/

يلاحظ:إذا قمت بحذف stopPropagation جزء على link وفد - سترى اثنين التنبيهات.أولا - ل link ومن ثم - ل group.