Question

我确信这很简单但是......

我正在为WordPress模板转换一个superfish响应式菜单，并设法实现基于此jsfiddle的版本。为了完善它，我想添加一个简单的slideDown / slideUp效果，当你点击一个项目及其子项打开时（菜单的移动版本）。

http://jsfiddle.net/badlydrawnben/c5MJy/ - 向下滑动底部栏，以便您看到＆lt; 480px版本

我的代码是

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

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

但是我尝试在那里添加一个slideDown函数，我无法让它工作。

我出错的任何想法？

谢谢，本

Answer 1

如果您从CSS中删除了所有被删除的重要内容，然后执行此操作：

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

......你快到了。你需要禁用suckerfish悬停效果来包装它。

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

Answer 2

所以你正在寻找这样的东西：

$('#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中也有一些编辑。当你试图用javascript动画一些东西时，不要使用！improtant。（代表显示：阻止！重要;显示：无！重要;那是在CSS中）

JsFiddle（已更新）

jQuery slideDown一个菜单的子项

2 个答案: