使用jQuery切换多个命令

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

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

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

任何帮助都将不胜感激

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:

这是菜单+菜单

参考资料

试试这个：

HTML

---

这在单击回调中指的是按钮元素，而不是主体元素。 试试这个代码

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

---

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

以下是我应该做的：

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

我不是在检查颜色，而是检查菜单区域是否可见。请在此处阅读有关is方法的信息：

另外，值得一提的是，您可以将任意多个on-event侦听器附加到一个元素上—因此您可以执行此操作，并且在单击#trigger时，所有这些侦听器都将运行：

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

---

祝你一切顺利

问题是菜单无法关闭，背景颜色变为绿色吗？@pablofiumara是的，先生！很抱歉一开始没有包括代码。这可以工作，但它会删除滑动动画。我怎么能保留这个？另外，如果我想将背景颜色从一种颜色褪色到另一种颜色？@JeremyPaulBeasley检查更新的答案。我的答案更快。谢谢！我在这里添加了它，但菜单现在无法重新打开。

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

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

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

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