SlickNav jQuery 插件 - 只有一个打开的菜单答案

【问题标题】：SlickNav jQuery plugin - only one open menuSlickNav jQuery 插件 - 只有一个打开的菜单
【发布时间】：2014-01-06 21:23:59
【问题描述】：

我想用这个插件实现手风琴效果。默认情况下，它用作切换。当我单击另一个 1 级菜单时，我需要折叠打开的菜单。

我的结构是：

1 级锚
一级锚
- 2 级锚点
  - 3 级锚
  - 3 级锚
  - 3 级锚
- 2 级锚
一级锚
1 级锚

当我点击另一个子菜单时，我需要关闭所有打开的 1 级子菜单。有人可以帮我吗？

非常感谢。

我正在使用这个插件 - https://raw.github.com/ComputerWolf/SlickNav/master/jquery.slicknav.js

http://slicknav.com/

【问题讨论】：

标签： javascript html mobile menu slicknav

【解决方案1】：

这似乎可以工作

$('#menu').slicknav({
    'open': function(trigger){
        var that = trigger.parent().children('ul');
        $('.slicknav_menu ul li.slicknav_open ul').each(function(){
            if($(this).get( 0 ) != that.get( 0 )){
                $(this).slideUp().addClass('slicknav_hidden');
                $(this).parent().removeClass('slicknav_open').addClass('slicknav_collapsed');
            }
        })
    }, 
});

【讨论】：

【解决方案2】：

我想要相同的功能，但接受的答案不足。除此之外，如果您有多个级别的菜单，它就不起作用。我修改了源代码中的 Plugin.prototype._itemClick 函数以更好地处理这个问题。我永远不会希望在同一级别打开多个菜单，但您可以添加一个设置选项来绕过我注入的代码。如果您添加了一个，此修改还将确保您的关闭处理程序被触发。我已经评论了我添加的代码：

Plugin.prototype._itemClick = function (el) {
    var $this = this;
    var settings = $this.settings;
    var data = el.data('menu');
    if (!data) {
        data = {};
        data.arrow = el.children('.' + prefix + '_arrow');
        data.ul = el.next('ul');
        data.parent = el.parent();
        //Separated parent link structure
        if (data.parent.hasClass(prefix + '_parent-link')) {
            data.parent = el.parent().parent();
            data.ul = el.parent().next('ul');
        }
        el.data('menu', data);
    }

    if (data.parent.hasClass(prefix + '_collapsed')) {

        //  **** Begin custom code ****
        data.parent.siblings('.slicknav_open').each(function () {
            var $li = $(this);
            var $el = $li.children('a');
            var $ul = $el.next('ul');
            $el.children('.' + prefix + '_arrow').html(settings.closedSymbol);
            $li.addClass(prefix + '_collapsed').addClass(prefix + '_animating').removeClass(prefix + '_open');
            $this._visibilityToggle($ul, $li, true, $el);
        });
        //  **** End custom code ****

        data.arrow.html(settings.openedSymbol);
        data.parent.removeClass(prefix + '_collapsed');
        data.parent.addClass(prefix + '_open');
        data.parent.addClass(prefix + '_animating');
        $this._visibilityToggle(data.ul, data.parent, true, el);
    } else {
        data.arrow.html(settings.closedSymbol);
        data.parent.addClass(prefix + '_collapsed');
        data.parent.removeClass(prefix + '_open');
        data.parent.addClass(prefix + '_animating');
        $this._visibilityToggle(data.ul, data.parent, true, el);
    }
};

我希望这可以帮助其他需要此功能的人。

【讨论】：