jquery - 使用 jQuery 切换多个命令

Question

我正在尝试构建一个菜单按钮，它既可以打开我的菜单，又可以同时触发其他命令。

单击按钮时，菜单应打开并且背景变为红色。

再次单击按钮时，菜单应关闭并且背景变为绿色。

http://test.bsley.com/rest/menu3/

任何帮助将非常感激！

jQuery：

    $(document).ready(function() {
$("#trigger").click(function() {
    if ($(this).css('background-color') == 'red') {
       alert("test");
    } else {
        $("#panel").slideDown("fast");
        $("body").css( "background-color", "red" );
    }
});
    });        

HTML：

    <div id="panel">Here is the menu</div> <div id="trigger">+ Menu</div>        

Answer 1

单击回调中的 this 指的是按钮元素，而不是正文元素。试试这个代码

$(document).ready(function() {
    $("#trigger").click(function() {
        var $btn = $(this);

        if ($(this).hasClass('opened')) {
            $('body').css("background-color", "green");
        } else {
            $('body').css("background-color", "red");
        }

        $('#panel').slideToggle('fast', function() {
            $btn.toggleClass('opened');
        });
    });
});

http://jsfiddle.net/CthzA/6/

Answer 2

原因很简单，css 方法的返回值与您设置的不同，它返回的是 rgb 值而不是字符串“red”。

这是我会做的：

$(document).ready(function() {
    $("#trigger").click(function() {
        if ( $('#panel').is(':visible') ) {
            $("#panel").slideUp("fast");
            $("body").css( "background-color", "white" );
        } else {
            $("#panel").slideDown("fast");
            $("body").css( "background-color", "red" );
        }
    });
 });

JSBin 示例

我不是在检查颜色，而是检查菜单区域是否可见。在此处阅读 is 方法：jQuery docs

此外，值得一提的是，您可以将任意数量的事件侦听器附加到一个元素上 - 这样您就可以这样做，并且当点击 #trigger 时，所有这些都将运行：

$('#trigger').on('click', function() { /*show/Hide the menu*/ })
$('#trigger').on('click', function() { /*change the background colour*/ })
$('#trigger').on('click', function() { /*do more stuff*/ })

祝一切顺利！

Answer 3

演示

var i = 0;
$('#trigger').click(function () {
    var color;
    if (i++ % 2 == 0) {
        color = "red";
    } else {
        color = "green";
    }
    $('body').css('background-color', color);
    $('#panel').slideToggle();
});

参考

http://api.jquery.com/css/

http://api.jquery.com/toggle/

Answer 4

试试这个代码：

HTML

<div id="panel">Here is the menu</div> <div id="trigger">+ Menu</div>        

JS

 $(document).ready(function() {
$("#trigger").click(function() {
    if ($(this).css('background-color') == 'red') {
       alert("test");
    } else {
        $("#panel").slideDown("fast");
        $("body").css( "background-color", "red" );
    }
});
    });  


var i = 0;
$('#trigger').click(function () {
    var color;
    if (i++ % 2 == 0) {
        color = "red";
    } else {
        color = "green";
    }
    $('body').css('background-color', color);
    $('#panel').toggle();
});