2012-02-14 17 views
9

"#business" è attualmente impostato sullo sfondo: # 323232; Come posso cambiarlo in # 000; dopo aver fatto clic su "#business" e tornare a 323232 una volta chiuso il menu?Come modificare la proprietà css utilizzando jquery con questo codice

$(document).ready(function() { 

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

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

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

}); 

Ecco il codice html:

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

risposta

28

È possibile utilizzare il metodo css per modificare una proprietà CSS (o più proprietà, se necessario):

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

Si noti che ho combinati i 2 ascoltatori di eventi che erano vincolati a #business in quanto non ha importanza il solo vincolare l'uno.

Come nota a margine, c'è un motivo per cui si passa una stringa vuota a hide? Questo non dovrebbe essere necessario.

+0

Questo ha funzionato bene con 1 eccezione .. non è tornato a # 323232 in #business? – Josh

+0

@Josh - Ahh, guarda la mia modifica. Ho avuto l'impostazione della proprietà CSS su '# businessmenu' piuttosto che su' # business'. –

+0

Tu sei l'uomo, grazie :) – Josh

1

La funzione css viene utilizzata per modificare le proprietà CSS come lo sfondo.

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

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

Se si desidera modificare lo sfondo di un elemento (nel tuo caso "#business") per un colore, è sufficiente fare:

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

ma non sono sicuro di cosa si intende per il "menu", dovresti probabilmente mostrarci il codice del tuo HTML!

+0

Metto l'html sopra .. Essenzialmente clicchi su #business e mostra "#businessmenu" – Josh

Problemi correlati