将两个函数绑定到jQuery中的按钮

Question

所以我在使用这个按钮执行上述任一功能时遇到一点麻烦.....

它不是很好，因为baseexpand和fullcollapse应该是类，但我不够熟练，不能重新编写一整套函数来容纳它，因为它们有大约50个依赖项。

无论如何，这里有两个功能....

// Full collapse
$( '#fullcollapse' ).click(function(){
    $( '#menu' ).multilevelpushmenu( 'collapse' );
});

// Base expand
$( '#baseexpand' ).click(function(){
    $( '#menu' ).multilevelpushmenu( 'expand' );
});

他们扩展并折叠侧边栏菜单....我有2个看起来像这样的按钮....

    <a id="fullcollapse" class="nav-toggle" role="button" href="#"><span></span></a>

<a id="baseexpand" class="nav-toggle" role="button" href="#"><span></span></a>

我想将这些按钮变成一个切换按钮，在每次点击的ID之间切换。

我一直在阅读文档大约6个小时，并试图调查它但无法解决这个问题。 请帮忙

Answer 1

尝试使用此包装器编写函数

var toggle = function (funcA, funcB) {
    var flag = true;
    return function () {
        if (flag) {
            funcA();
        } else {
            funcB();
        }
        flag = !flag;
    };
};

适用于

$('#btn').click(toggle (function (){
    $('#menu').multilevelpushmenu( 'collapse' ); // happens 1, 3, 5, 7, ...   time clicked
}, function (){
    $('#menu').multilevelpushmenu( 'expand' );   // happenes  2, 4, 6, 8, ... time clicked
}));

奖励我重新实现切换以能够传播返回值。

var toggle = function (a, b) {
    var togg = false;
    return function () {
        // passes return value back to caller
        return (togg = !togg) ? a() : b();
    };
};

Answer 2

在这里查看现场演示： https ： //jsfiddle.net/gpnsmbvk/1/

您可以通过不同的方式实现您的要求。 这是一个切换类的解决方案：

HTML

<a id="anyofthestates" class="nav-toggle" role="button" href="#"><span>sidebar me</span></a>

jQuery的

$(function(){

    $('#anyofthestates').click(function(){
        $(this).toggleClass('expand');

        if($(this).hasClass('expand')){
            alert('baseexpand');
            // $( '#menu' ).multilevelpushmenu( 'expand' );
        }
        else{
            alert('fullcollapse');
            // $( '#menu' ).multilevelpushmenu( 'collapse' );
        }
    });

});

Answer 3

我会更改按钮本身的数据属性（状态可以存储在DOM中的任何其他位置，如菜单上），并在每次点击时在两种状态之间切换：

$('.nav-toggle').click(function(e){
    e.preventDefault();

    $('#menu').multilevelpushmenu($(this).data('action'));
    $(this).data('action', ($(this).data('action') == 'fullcollapse' ? 'basexpand' : 'fullcollapse'));
});

HTML：

<a data-action="fullcollapse" class="nav-toggle" role="button"><span></span></a>

您在HTML中设置的data-action应该是您在第一次单击时所需的操作。

使用通用multilevelpushmenu函数的示例： https ： //jsfiddle.net/q3c117yr/

Answer 4

假设您只有那两个带nav-toggle DOM的按钮。

HTML：

<a id="fullcollapse" class="nav-toggle" role="button" href="#"><span></span></a>

<a id="baseexpand" class="nav-toggle" role="button" href="#"><span></span></a>

JS：

$(function () {
  var expand = false;
  $('.nav-toggle').on('click', function (e) {
    // not preventing default in case other things are listening if not then prevent it here.

     expand = !expand;
     var action = expand ? 'expand' : 'collapse';
     $('#menu').multilevelpushmenu(action);
  });
});

使用data不起作用的原因是数据属性绑定到您选择的元素。 每个按钮都有自己的数据属性，因此您无法通过这一个值同步两个按钮。 您需要具有可由两者访问的单独值，以保持其状态同步。