SlickNav jQuery插件 - 只有一個打開的菜單

我想用這個插件實現手風琴效果。默認情況下，它用作切換。當我點擊另一個1級菜單時，我需要摺疊打開的菜單。SlickNav jQuery插件 - 只有一個打開的菜單

我的結構是：

1級錨
1級錨
- 2級錨
  - 3級錨
  - 3級錨
  - 水平3 anc HOR
- 2級錨
1級錨
1級錨

我需要關閉所有打開的1級子菜單，當我點擊另一個子菜單。任何人都可以幫我解決這個問題嗎？

非常感謝。

我使用這個插件 - https://raw.github.com/ComputerWolf/SlickNav/master/jquery.slicknav.js

http://slicknav.com/

來源

2014-01-06 johnkodes

這是什麼運氣？ – pmandell

這SEMS工作

$('#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'); 
      } 
     }) 
    }, 
});

來源

2014-05-02 05:26:27 user3468914

我想相同的功能，但接受的答案達不到。除此之外，如果您有多個級別的菜單，則不起作用。我修改了源代碼中的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); 
    } 
};

我希望這可以幫助任何需要此功能的人。

來源

2015-03-04 03:33:00

SlickNav jQuery插件 - 只有一個打開的菜單

回答

相關問題