jQuery按钮功能监听菜单打开/关闭状态改变状态

Question

我有这个脚本，在单击.....时将汉堡包菜单按钮从行更改为x我已经设置了一个简单的标志来改变它的id，我认为这可以做得更好…

我要做的是检查菜单的状态，并以X(活动)或3行形式获得按钮"相应地采取行动"…这是我的代码

document.querySelector( '.nav-toggle' )
  .addEventListener( "click", function() {
    this.classList.toggle( "active" );
  })
var toggle = function (funcA, funcB) {
    return function () {
        var flag = true;
        if (flag) {
            funcA();
        } else {
            funcB();
        }
        flag = !flag;
    };
};
$('.nav-toggle').click(toggle (function (){
    $('#menu').multilevelpushmenu( 'collapse' );
}, function (){
    $('#menu').multilevelpushmenu( 'expand' );
}));

，这里是按钮的HTML ....

<p><a class="nav-toggle" href="#"><span></span></a>Menu</p>

…我知道它应该是相对简单的，但我不能得到它的工作....仅供参考，我目前正在尝试.......

$(document).ready(function() {
  $(".nav-toggle").toggle(
     function () {
         $( '#menu' ).multilevelpushmenu( 'expand' );
     },
     function () {
        $( '#menu' ).multilevelpushmenu( 'collapse' );
     },
   );

});

但这不起作用。如有任何帮助，不胜感激。

Answer 1

尝试将toggle调用移动到click事件handler函数

$(document).ready(function () {
    $('#menu').multilevelpushmenu({
        onMenuSwipe: function () {
            var e = arguments[0];
            if ($(e.target).prop('tagName').toLowerCase() == 'input') return false;
        }
    });
    var toggle = function (funcA, funcB) {
        return function () {
            var flag = true;
            if (flag) {
                funcA();
            } else {
                funcB();
            }
            flag = !flag;
        };
    };
    $('.nav-toggle').click(function () {
        toggle(function () {
            $('#menu').multilevelpushmenu('collapse');
        }, function () {
            $('#menu').multilevelpushmenu('expand');
        })
    });
});
document.querySelector('.nav-toggle')
    .addEventListener("click", function () {
    this.classList.toggle("active");
});

jsfiddle http://jsfiddle.net/c5EA4/256/