用jQuery切換多個命令

-1

我試圖建立一個菜單按鈕，它既打開我的菜單，也同時觸發其他命令。用jQuery切換多個命令

單擊按鈕時，應打開菜單，背景變爲紅色。

當再次點擊按鈕時，菜單應該關閉，背景變成綠色。

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>

來源

2013-10-01 Jeremy P. Beasley

問題是菜單無法關閉並且背景顏色變爲綠色這一事實？ – pablofiumara

@pablofiumara是的先生！對不起，沒有代碼在第一個傢伙。 –

這在點擊回調是指按鈕元素，而不是身體的元素。試試這個代碼

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

來源

2013-10-01 08:22:59 ghettovoice

非常感謝！ –

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/

來源

2013-10-01 08:05:51

這個工程，但它刪除了滑動動畫。我怎樣才能保持這個？另外，如果我想從一個到另一個淡化背景顏色？ –

@JeremyPaulBeasley檢查更新的答案。我的回答比較快。 –

試試這個code：

HTML

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

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

來源

2013-10-01 08:12:18 pablofiumara

謝謝！我在這裏添加了它，但菜單現在不會打開。 http://test.bsley.com/rest/menu4/ –

原因很簡單的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"); 
     } 
    }); 
});

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*/ })

祝你好運吧！

來源

2013-10-01 08:23:03 mattbee

用jQuery切換多個命令

回答

相關問題