How to change css property using jquery with this code

Question

"#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>

James Allardice · Accepted Answer · 2012-02-14 23:16:16Z

35

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.

edited Feb 14, 2012 at 23:16

answered Feb 14, 2012 at 23:05

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rorchackh · Accepted Answer · 2012-02-14 23:08:23Z

4

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!

answered Feb 14, 2012 at 23:08

Rorchackh

2,1817 gold badges22 silver badges39 bronze badges

1 Comment

Josh Over a year ago

I put the html above.. Essentially you click on the #business and it shows "#businessmenu"

JaredPar · Accepted Answer · 2012-02-14 23:06:26Z

1

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

answered Feb 14, 2012 at 23:06

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

Collectives™ on Stack Overflow

How to change css property using jquery with this code

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related