2012-02-14 17 views
9

"#business" jest obecnie ustawione na tło: # 323232; Jak mogę to zmienić na # 000; po kliknięciu "#business" i powrocie do 323232 po zamknięciu menu?Jak zmienić właściwość css za pomocą jquery z tym kodem

$(document).ready(function() { 

    $("#business").click(function(){ 
     jQuery.fx.off = true; 
     $("#businessmenu").toggle(""); 
    }); 

    $('html').click(function() { 
     $("#businessmenu").hide(""); 
    }); 

    $('#business').click(function(event){ 
     event.stopPropagation(); 
    }); 

}); 

Oto html:

<a href="#" id="business">Biz name</a> 
<div id="businessmenu"> 
    <a href="help.html">Help</a> 
</div> 

Odpowiedz

28

Można użyć metody css zmienić właściwości CSS (lub wiele właściwości w razie potrzeby):

$("#business").click(function(event){ 
    jQuery.fx.off = true; 
    $("#businessmenu").toggle(""); 
    $(this).css("background-color", "#000"); 
    event.stopPropagation(); 
}); 
$('html').click(function() { 
    $("#businessmenu").hide(); 
    $("#business").css("background-color", "#323232"); 
}); 

uwaga, że ​​mam połączyłem 2 detektory zdarzeń, które zostały powiązane z #business, ponieważ nie ma znaczenia, aby je związać.

Na marginesie, czy istnieje powód, dla którego podajesz pusty ciąg znaków do hide? To nie powinno być konieczne.

+0

To zadziałało dobrze z jednym wyjątkiem ... nie powrócił do # 323232 w # biznesie? – Josh

+0

@Josh - Ahh, zobacz moją edycję. Miałem to ustawienie właściwości CSS w '# businessmenu' zamiast' # business'. –

+0

Jesteś mężczyzną, dziękuję :) – Josh

1

Funkcja css służy do zmiany właściwości CSS, takich jak tło.

$('html').click(function() { 
    $('#businessmenu').hide(""); 
    $('#busniessmenu').css('background-color', '#323232'); 
}); 

$('#business').click(function(event){ 
    event.stopPropagation(); 
    $(this).css('background-color', '#000'); 
}); 
3

Jeśli chcesz zmienić tło elementu (w przypadku „#business”) do koloru, po prostu zrobić:

$("#business").css({ 
    "background": "#000" 
}); 

Ale nie jestem pewien, co masz na myśli "menu", powinieneś pokazać kod HTML!

+0

Umieściłem html powyżej. Zasadniczo klikasz na # biznes i pokazuje "#businessmenu" – Josh

Powiązane problemy