سؤال

لدي القائمة التالية البسيطة لأسفل.

 $(function(){
$('.sub-menu').hide();
$('.menu-item').hover(
    function () {
        var target = $(this).children('ul');
        $.browser.msie ? target.show() : target.slideDown(150);
    },
    function () {
        var target = $(this).children('ul')
        $.browser.msie ? target.hide() : target.slideUp(150);
    }
);

});

ينزلق إلى أسفل .sub-menu وأنت تحوم فوق. menu-item وتنزلق إلى الوراء عندما تغادر ، مثالية.

أحتاجه أن ينزلق .sub-Menu عندما تحوم فوق. menu-item ، والعكس بالعكس إلى ما سبق حقًا ..

لقد فعلت ما هو واضح من تبديل slideup وانزلاق ولكن لا يبدو أنه يعمل.

أيه أفكار؟

شكرا جزيلا إذا كنت تستطيع :)

هل كانت مفيدة؟

المحلول

$(function(){
    $('.menu-item').hover(
        function () {
            var target = $(this).children('ul');
            $.browser.msie ? target.hide() : target.slideUp(150);
        },
        function () {
            var target = $(this).children('ul')
            $.browser.msie ? target.show() : target.slideDown(150);
        }
    );
});

يجب أن تعمل ، على الرغم من أنني لا أستطيع اختباره بدون المزيد من التعليمات البرمجية.

في الأساس أنا أفترض .sub-menu تظهر بالفعل ، لذلك عندما تحوم.menu-item تريد إخفاءه ، صحيح؟

كل ما قمت بتغييره كان: لقد قمت بتبديل وظيفتي وأزلت $('.sub-menu').hide(); كان ذلك في البداية. لا يحتاج إلى الاختباء قبل أن ينزلق بالفعل.

يحرر: العمل على مثالك الأخير.

تحقق من ذلك هنا: http://jsfiddle.net/gwbuj/3/

ما فعلته هو:

  • يتغيرون #button و #slider إلى الفصول (.button و .slider)
  • قم بتعديل CSS وفقًا لذلك ، وتغير .slider CSS للسماح بأزرار متعددة (كان لديك وضعها على الإطلاق والتي لن تسمح لك برؤية الآخرين)
  • اضبط رمز jQuery للعمل على أزرار متعددة
  • أضاف زر آخر لتظهر لك أنه يعمل
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top