jQuery slideDown дочерние элементы меню

Я уверен, что это очень просто, но...

Я конвертирую адаптивное меню superfish для шаблона WordPress, и мне удалось реализовать версию на основе этого jsfiddle. Чтобы отшлифовать его, я хочу добавить простой эффект slideDown/slideUp, когда вы нажимаете на элемент, и его дочерние элементы открываются (мобильная версия меню).

http://jsfiddle.net/badlydrawnben/c5MJy/ — сдвиньте нижнюю панель, чтобы просмотр версии ‹480px

Код у меня есть

$('li.has-children').click(

    function () {
        $(this).toggleClass("xpopdrop").siblings().removeClass('xpopdrop');
            });

но как бы я ни пытался добавить туда функцию slideDown, я не могу заставить ее работать.

Есть идеи, где я ошибаюсь?

Спасибо, Бен


jquery slidedown superfish
person badlydrawnben    schedule 18.07.2013    source источник
comment
Итак, вы хотите анимацию, а не мгновенное открытие/закрытие?   -  person isherwood    schedule 19.07.2013

Ответы (2)


arrow_upward
0
arrow_downward

Если вы уберете все проклятые !importants из CSS, а затем сделаете следующее:

$('.mobnav-subarrow').click(function () {
    $(this).parent('li').find('ul').slideToggle();
});

... ты почти там. Вам нужно отключить эффект наведения присоски, чтобы завершить его.

http://jsfiddle.net/isherwood/c5MJy/4/

person isherwood    schedule 18.07.2013

arrow_upward
0
arrow_downward

Итак, вы ищете что-то вроде этого:

$('#mobnav-btn').click(

function () {
    $('.sf-menu').slideToggle()
});


$('.mobnav-subarrow').click(

function () {
    var list = $(this).next();
    if(list.is(':visible')){
        $('.sf-menu ul').slideUp();
    }else{
        $('.sf-menu ul').slideUp();
        list.slideDown();
    }
});

В css тоже были некоторые правки. Не используйте !improtant, когда пытаетесь анимировать что-то с помощью javascript. (для отображения: block!important и display: none!important, это было в CSS)

JsFiddle (обновлено)

person drip    schedule 18.07.2013