javascript - jQuery Button 函数监听菜单打开/关闭状态改变状态

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/