JS/JQUERY: كيف يمكنني تحديد العنصر الأول من الملاحة في UL عند التحول على عنصر LI آخر (أقل)؟

Question

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

الآن أود تغيير لون الخلفية لـ Li.section-title إلى الأسود بينما يحوم على أحد روابط هذا القسم (عناصر LI أسفل القسم).

القضية هي أن لدي أكثر من 1 li.

$(document).ready(function() {

$('#navigation ul li a').hover(
function() {
    $('#navigation ul li.section-title').animate( {
        backgroundColor: "#000",
        color: "#F9B60F"
    }, "fast" );
},
function() {
    $('#navigation ul li.section-title').animate( {
        backgroundColor: "#FFF",
        color: "#000000",
    }, "fast" );
}
);

});

ولكنه سيغير في وقت واحد لون جميع عناصر-القسم للصفحة.

أحاول حاليًا استخدام (هذا). parent للحصول على li.section-title فقط للمجموعة التي تتضمن عنصر تحوم حاليًا على Li ، لكن هذا لا يعمل على الإطلاق لسبب ما. ربما تكون هذه هي النظرية التي تقف وراءها خاطئ أو رمزتي.

هذا هو الكود الحالي الخاص بي (الذي لا يعمل):

$(document).ready(function() {

$('#navigation ul li a').hover(
function() {
    $(this).parents(".section-title").animate( {
        backgroundColor: "#000",
        color: "#F9B60F"
    }, "fast" );
},
function() {
    $(this).parents(".section-title").animate( {
        backgroundColor: "#FFF",
        color: "#000000",
    }, "fast" );
}
);

});

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

ربما يمكنك. يمكن العثور على موقع الويب المعني (بما في ذلك البرنامج النصي المكسور) على: www.jannisgundermann.com

لاحظ على الرغم من أن "الدفع" وتغيير لون عناصر LI يتم تنفيذها بواسطة نص آخر غير مرتبط بهذا.

شكرا للقراءة. جانيس

Answer 1

أنت لا تستهدف LI بشكل صحيح. جرب هذا:

$('#navigation ul li a').hover(
    function() {
        $(this).parents('ul').find('li.section-title').animate( {
            backgroundColor: "#000",
            color: "#F9B60F"
        }, "fast" );
    },
    function() {
        $(this).parents('ul').find('li.section-title').animate( {
            backgroundColor: "#FFF",
            color: "#000000",
        }, "fast" );
    }
);

يجب عليك العثور على الوالد UL أولاً ، ثم تجد العنصر الموجود في هذا UL الذي تريد تسليط الضوء عليه.

Answer 2

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

$(document).ready(function() {

$('#navigation ul li a').hover(
function() {
        $('li.section-title', $(this).parent()).animate( {
                backgroundColor: "#000",
                color: "#F9B60F"
        }, "fast" );
},
function() {
        $('li.section-title', $(this).parent()).animate( {
                backgroundColor: "#FFF",
                color: "#000000",
        }, "fast" );
}
);

});