如果菜单处于活动状态或非活动状态，则切换图标的类.多级按钮菜单
Toggle class for icon if menu is active or inactive. Multi-level push menu
我正在使用此处找到的多级推送菜单
我正在尝试在菜单处于活动或非活动状态时添加和删除类。
我尝试使用在非活动类 (.multilevelpushmenu_inactive( 上切换的函数自行实现这一点，但我无法让它工作。所以现在我正在尝试使用内置的回调函数。
这些记录在这里
问题似乎是没有回调来检测菜单何时处于非活动状态(即当所有动画都已完成并且菜单返回到起始位置时(。例如，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();
}
});
小提琴 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');
}
});
小提琴 2
我认为解决方案是检查回调内活动菜单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>相关文章：
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 如果其中一个子菜单项处于活动状态，则展开下拉菜单
- 当子菜单的父级或包含链接处于活动状态时，如何告知子菜单可见
- Jquery 无法返回到动画菜单列表上的活动状态
- JavaScript 下拉菜单在单击时处于活动状态，在外部单击时不活动
- 如果菜单处于活动状态或非活动状态，则切换图标的类.多级按钮菜单
- 当用户单击子菜单并在新页面中打开时，子菜单将保持活动状态
- 活动状态菜单 JavaScript
- 折叠菜单中的活动状态
- javascript菜单悬停处于活动状态
- 滚动经过时使菜单类处于活动状态
- 向jQuery滚动条/侧菜单添加当前/活动状态
- 在车把部分中设置导航菜单项为活动状态
- 当子菜单处于活动状态时，将类添加到父级li
- 在下拉菜单中获取要切换为活动状态的图像
- 崩溃引导3多层子菜单&打开子菜单时更改活动状态
- 当子菜单处于活动状态或悬停状态时，保持锚点悬停状态
- 引导导航条子菜单活动状态不工作
- 切换菜单处于活动状态
- 如何防止折叠菜单在页面处于活动状态时关闭
