如果菜单处于活动状态或非活动状态，请切换图标类。多层次按菜单

Question

我使用的是多级推进菜单，发现here

我试图添加和删除一个类时，菜单处于有效或无效状态。

我试着用自己的功能来切换一个不活动的类（.multilevelpushmenu_inactive），但我无法让它工作。所以现在我正在尝试使用内置的回调函数。

这些都记录here

这个问题似乎是，有用于检测没有回调时，菜单未激活（即当所有的动画已经完成和菜单是回到起始位置）。 onCollapseMenuEnd例如将在任何子菜单打开/关闭时触发。

我已经把一切都在一个小提琴，但我的代码如下所示：

// global vars 
var _leftMenu = $('#leftMenu'); 
var _icon = _leftMenu.find('.fa'); 
var _menu = _leftMenu.find('.vert'); 

// pushmenu options 
_leftMenu.multilevelpushmenu({ 
    containersToPush: [$()], 
    collapsed: true, 
    backText: '', 
    backItemIcon: 'fa fa-reply', 
    menuHeight: '100%', 
    onExpandMenuStart: function() { 
     _icon.addClass('fa-times').removeClass('fa-reorder'); 
     _menu.fadeOut(); 
    }, 
    onMenuReady: function() { 
     _icon.addClass('fa-reorder').removeClass('fa-times'); 
     _menu.fadeIn(); 
    } 
}); 

Fiddle 1

我不知道是否有触发另一个回调内部onMenuReady回调的方式功能。

如果有帮助，我可以将HTML添加到问题中，但所有内容都可以在小提琴中找到。

编辑

对于它的价值，我做了我展示原有功能的导航元素上工作的小提琴。这几乎是完全工作的，但是当您尝试关闭导航时，深入了解更深层次的导航项（选择激励，然后选择任一子菜单），则在最后一步中不会切换类）。以下是此功能的jQuery：

_icon.on('click',function(){ 
    if($('.multilevelpushmenu_inactive')[0]){ 
     _menu.fadeOut(); 
     $(this).addClass('fa-times').removeClass('fa-reorder'); 
    }else{ 
     _menu.delay(500).fadeIn(); 
     $(this).addClass('fa-reorder').removeClass('fa-times'); 
    } 
}); 

Fiddle 2

Answer 1

我认为一个解决办法是检查onCollapseMenuEnd回调内部的活动菜单目前的水平，如果它null你可以改变图标fa-reorder。

下面的代码防止了最后一层被关闭前的关闭图标变为：

onCollapseMenuEnd: function (options) { 
     var level = _leftMenu.multilevelpushmenu('activemenu').data('level'); 
     console.log('collapsing start.. level=' + level); 
     if (level === null) { 
      console.log('inactive'); 
      _icon.addClass('fa-reorder').removeClass('fa-times'); 
      _menu.fadeOut() 
     } 
    } 

请在下面找到这里演示的jsFiddle。

不知道是否有一个更容易或更好的方式来做到这一点，但它似乎像你想要的那样工作。

（与单击处理活动类是只是一个测试，我首先想到的，你想是这样的。）

演示这里看起来比在拨弄有点不同，不知道为什么。但是图标像小提琴一样变化。

$(document).ready(function() { 
 

 
    // global vars 
 
    var _leftMenu = $('#leftMenu'); 
 
    var _icon = _leftMenu.find('.fa'); 
 
    var _menu = _leftMenu.find('.vert'); 
 

 
    // get the actual doc height when everything has loaded 
 
    chHeight = function() { 
 
     var fullHeight = Math.max($(document).height()); 
 
     _leftMenu.css('min-height', fullHeight); 
 
    }; 
 

 
    // pushmenu options 
 
    _leftMenu.multilevelpushmenu({ 
 
     containersToPush: [$()], 
 
     collapsed: true, 
 
     backText: '', 
 
     backItemIcon: 'fa fa-reply', 
 
     menuHeight: '100%', 
 
     onExpandMenuStart: function (options) { 
 
      console.log(options); 
 
      var level = _leftMenu.multilevelpushmenu('activemenu').data('level'); 
 
      console.log('expanding start.. level=' + level); 
 
      _icon.addClass('fa-times').removeClass('fa-reorder'); 
 
      _menu.fadeOut(); 
 
     }, 
 
     onCollapseMenuEnd: function (options) { 
 
      var level = _leftMenu.multilevelpushmenu('activemenu').data('level'); 
 
      console.log('collapsing start.. level=' + level); 
 
      if (level === null) { 
 
       console.log('inactive'); 
 
       _icon.addClass('fa-reorder').removeClass('fa-times'); 
 
       _menu.fadeIn() 
 
      } 
 
     }, 
 
     onMenuReady: function() { 
 
      _icon.addClass('fa-reorder').removeClass('fa-times'); 
 
      _menu.fadeIn(); 
 
     }, 
 
     onItemClick: function() { 
 
      // First argument is original event object 
 
      var event = arguments[0], 
 
       // Second argument is menu level object containing clicked item (<div> element) 
 
       $menuLevelHolder = arguments[1], 
 
       // Third argument is clicked item (<li> element) 
 
       $item = arguments[2], 
 
       // Fourth argument is instance settings/options object 
 
       options = arguments[3]; 
 

 
      // You can do some cool stuff here before 
 
      // redirecting to href location 
 
      // like logging the event or even 
 
      // adding some parameters to href, etc... 
 

 
      $('li').removeClass('active'); // reset any active element 
 
      $item.addClass('active'); // set active class 
 
      // Anchor href 
 
      //var itemHref = $item.find('a:first').attr('href'); 
 
      // Redirecting the page 
 
      //location.href = itemHref; 
 
     } 
 
    }); 
 

 
    $(document).bind('DOMNodeInserted ajaxComplete', function() { 
 
     chHeight(); 
 
    }); 
 

 
});

body { 
 
    font-family:Helvetica, Arial, sans-serif; 
 
} 
 
/* line 1525, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
/* line 1533, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper .levelHolderClass { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    top: 0; 
 
    background: #1a1a1a; 
 
    width: auto; 
 
    min-height: 100%; 
 
    font-family: sans-serif; 
 
    font-size: 1em; 
 
    zoom: 1; 
 
} 
 
/* line 1545, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper .multilevelpushmenu_inactive { 
 
    background: #1a1a1a; 
 
} 
 
/* line 1549, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper h2 { 
 
    font-size: 1em; 
 
    line-height: 1em; 
 
    font-weight: normal; 
 
    color: #fff; 
 
    padding: 0 0 0 30px; 
 
} 
 
/* line 1556, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper h2.icon-heading { 
 
    padding: 0 .4em 0 .4em; 
 
} 
 
/* line 1560, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper h2 i { 
 
    position: relative; 
 
    top: -5px; 
 
    right: 4px; 
 
    font-size: 1.5em; 
 
} 
 
/* line 1568, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper ul { 
 
    list-style: none; 
 
    padding: 0 30px; 
 
    margin: 0; 
 
} 
 
/* line 1573, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper ul.first { 
 
    margin-top: 60px; 
 
} 
 
/* line 1578, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper li { 
 
    cursor: pointer; 
 
    border-top: 1px solid #333; 
 
    padding: 10px 2px; 
 
} 
 
/* line 1583, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper li:last-child { 
 
    border-bottom: 1px solid #333; 
 
} 
 
/* line 1587, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper li:hover { 
 
    background-color: #333; 
 
} 
 
/* line 1592, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper a { 
 
    display: block; 
 
    outline: none; 
 
    overflow: hidden; 
 
    font-size: 1em; 
 
    line-height: 1em; 
 
    padding: .2em .2em; 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 
/* line 1603, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper .backItemClass { 
 
    display: block; 
 
    padding: 10px 2px; 
 
    background: none; 
 
    border-top: none; 
 
    margin: 0 30px; 
 
} 
 
/* line 1611, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper .floatRight { 
 
    float: right; 
 
} 
 
/* line 1615, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper .floatLeft { 
 
    float: left; 
 
} 
 
/* line 1619, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper .cursorPointer { 
 
    cursor: pointer; 
 
} 
 
/* line 1623, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper .iconSpacing_ltr { 
 
    padding: 0 .4em 0 0; 
 
} 
 
/* line 1627, ../sass/layout/_ReWork.scss */ 
 
.multilevelpushmenu_wrapper .ltr { 
 
    margin-left: -100%; 
 
    left: 0; 
 
    border-right: 1px solid #333; 
 
} 
 
/* line 1634, ../sass/layout/_ReWork.scss */ 
 
#leftMenu { 
 
    position: absolute; 
 
    top: 0; 
 
    background: #1a1a1a; 
 
    color: #fff; 
 
    z-index: 1; 
 
    border-right: 1px solid #333; 
 
} 
 
/* line 1643, ../sass/layout/_ReWork.scss */ 
 
#leftMenu .toggle-menu, #leftMenu .back-button { 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 10px; 
 
    color: #fff; 
 
    font-size: 1.5em; 
 
} 
 
/* line 1650, ../sass/layout/_ReWork.scss */ 
 
#leftMenu .toggle-menu:focus, #leftMenu .back-button:focus { 
 
    outline: none; 
 
} 
 
/* line 1655, ../sass/layout/_ReWork.scss */ 
 
#leftMenu .back-button { 
 
    display: none; 
 
    right: 50px; 
 
} 
 
/* line 1662, ../sass/layout/_ReWork.scss */ 
 
#leftMenu.open .back-button { 
 
    display: block; 
 
} 
 
/* line 1667, ../sass/layout/_ReWork.scss */ 
 
#leftMenu .vert { 
 
    position: absolute; 
 
    top: 45px; 
 
    -webkit-transform: rotate(270deg); 
 
    -moz-transform: rotate(270deg); 
 
    -o-transform: rotate(270deg); 
 
} 
 
/* line 1675, ../sass/layout/_ReWork.scss */ 
 
#leftMenu ul#mainNav { 
 
    margin: 40px 0 0 0; 
 
    padding: 0 20px; 
 
    list-style: none; 
 
} 
 
/* line 1682, ../sass/layout/_ReWork.scss */ 
 
#leftMenu ul#mainNav li a { 
 
    display: block; 
 
    color: #fff; 
 
    font-size: 0.8em; 
 
    text-decoration: none; 
 
} 
 
/* line 1688, ../sass/layout/_ReWork.scss */ 
 
#leftMenu ul#mainNav li a:focus { 
 
    outline: none; 
 
} 
 
/* line 1693, ../sass/layout/_ReWork.scss */ 
 
#leftMenu ul#mainNav li ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
} 
 
.active { 
 
    background-color: blue; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="http://oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script> 
 
<link href="https://rawgit.com/adgsm/multi-level-push-menu/master/jquery.multilevelpushmenu.css" rel="stylesheet"/> 
 
<script src="https://rawgit.com/adgsm/multi-level-push-menu/master/jquery.multilevelpushmenu.min.js"></script> 
 
<div id="leftMenu"> 
 
    <nav> 
 
     <h2 class="icon-heading"><i class="fa fa-reorder"></i></h2> 
 

 
     <ul class="first"> 
 
      <li><a href="#">Communicate</a> 
 

 
       <h2>Comminucate</h2> 
 

 
       <ul> 
 
        <li><a href="#">Overview</a> 
 

 
        </li> 
 
        <li><a href="#">Blog</a> 
 

 
        </li> 
 
        <li><a href="#">Features</a> 
 

 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Motivate</a> 
 

 
       <h2>Motivate</h2> 
 

 
       <ul> 
 
        <li><a href="#">Sales Manager Q1 Incentive</a> 
 

 
         <h2>Programmes</h2> 
 

 
         <ul> 
 
          <li><a href="#">Retailer Performance Report</a> 
 

 
          </li> 
 
          <li><a href="#">Retailer Performance Chart</a> 
 

 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li><a href="#">Boutique Vehicle Order Tool</a> 
 

 
         <h2>Programmes</h2> 
 

 
         <ul> 
 
          <li><a href="#">Order Form</a> 
 

 
          </li> 
 
          <li><a href="#">Order Report</a> 
 

 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Educate</a> 
 

 
       <h2>Educate</h2> 
 

 
       <ul> 
 
        <li><a href="#">Overview</a> 
 

 
        </li> 
 
        <li><a href="#">Resource Centre</a> 
 

 
        </li> 
 
        <li><a href="">Network</a> 
 

 
        </li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="~/celebrate/">Celebrate</a> 
 

 
      </li> 
 
      <li><a href="~/reports/">Reporting</a> 
 

 
      </li> 
 
     </ul> 
 
    </nav> 
 
    <p class="vert">Menu</p> 
 
</div>