0

我敢肯定这真的很简单，但是......

我正在为 WordPress 模板转换一个超级鱼响应菜单，并设法实现了一个基于这个 jsfiddle 的版本。为了完善它，我想添加一个简单的 slideDown/slideUp 效果，当您单击一个项目并且它的子项在（菜单的移动版本）中打开时。

http://jsfiddle.net/badlydrawnben/c5MJy/ - 滑动底部栏，这样您就可以看到 <480px 版本

我的代码是 

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

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

但是我也尝试在其中添加一个 slideDown 功能，但我无法让它工作。

有什么想法我哪里出错了吗？

谢谢，本

4

2 回答 2

0

如果您从 CSS 中删除所有该死的 !importants，然后执行以下操作：

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

... 您快到了。您需要禁用吸盘鱼悬停效果才能将其包裹起来。

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

于 2013-07-18T20:30:06.873 回答
0

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

$('#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。（代表 dispaly：block！important；和 display：none！important；那是在 CSS 中）

JsFiddle（更新）

于 2013-07-18T20:30:48.807 回答