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

时间:2015-05-21 23:59:30

标签: javascript jquery

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

它不是很好,因为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个小时的文档并尝试查看它但无法解决这个问题。请帮忙

4 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

点击此处观看现场演示: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' );
        }
    });

});

答案 2 :(得分:0)

我会更改按钮本身的数据属性(状态可以存储在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/

答案 3 :(得分:0)

假设您只有那两个带有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不起作用的原因是因为数据属性绑定到您选择的元素。每个按钮都有自己的数据属性,因此您无法通过这一个值同步两个按钮。您需要有一个可由两者访问的单独值,以保持其状态同步。