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

这个单击回调是指按钮元素，而不是body元素。试试这段代码

$(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 example

我没有检查颜色，但菜单区域是否可见。在此处阅读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*/ })

祝你好运！＃/ p>

Answer 3

DEMO

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

试试这个code：

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

使用jQuery切换多个命令

4 个答案: