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。< / p>

以下代码阻止在关闭最后一个级别之前更改关闭图标：

    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找到以下演示文稿。

不知道是否有更简单或更好的方法，但它似乎就像你想要的那样。

（带有点击处理程序的活动类只是一个测试。我首先想到你喜欢这样的东西。）

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果菜单处于活动状态或非活动状态，则切换图标类。多级推送菜单

1 个答案: