Плагин SlickNav jQuery - только одно открытое меню

Question

Я хотел бы добиться эффекта аккордеона с этим плагином. По умолчанию он работает как переключатель. Мне нужно будет свернуть открытые меню, когда я нажму на другое меню уровня 1.

Моя структура:

• якорь уровня 1

• якорь уровня 1

  • якорь уровня 2
    • якорь 3 уровня
    • якорь 3 уровня
    • якорь 3 уровня
  • якорь уровня 2

• якорь уровня 1

• якорь уровня 1

Мне нужно закрыть все открытые подменю уровня 1, когда я нажимаю на другое подменю. Может ли кто-нибудь помочь мне с этим, пожалуйста?

Большое спасибо.

Я использую этот плагин - https://raw.github.com/ComputerWolf/SlickNav/master/jquery.slicknav.js

http://slicknav.com/

Answer 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');
            }
        })
    }, 
});

Answer 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);
    }
};

Я надеюсь, что это поможет всем, кто нуждается в этой функциональности.