CODEWITHSUNDEEP
jquerycss
Josh
Josh

Reputation: 615

How to change css property using jquery with this code

"#business" is currently set to background: #323232; How can I change it to #000; after I click on "#business" and back to 323232 once the menu is closed?

$(document).ready(function() {

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

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

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

});

Here is the html:

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

Upvotes: 10

Views: 79546

Answers (3)

James Allardice
James Allardice

Reputation: 165971

You can use the css method to change a CSS property (or multiple properties if necessary):

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

Note that I've combined the 2 event listeners you had bound to #business as it's makes no difference to just bind the one.

As a side note, is there a reason you are passing an empty string to hide? That shouldn't be necessary.

Upvotes: 35

Rorchackh
Rorchackh

Reputation: 2181

If you want to change the background of an element (in your case "#business") to a color, you simply do:

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

But I am not sure what you mean by the "menu", you should probably show us the code of your HTML!

Upvotes: 4

JaredPar
JaredPar

Reputation: 754645

The css function is used for changing CSS properties like background. 

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

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

Upvotes: 1

Related Questions