jQuery函数更改CSS

Question

I have the following function:

$(document).ready(function () {
    $('.contents').hide();
    $('.slide').click(function () {
        var $this = $(this);
        $(this).siblings('.contents').slideToggle(200, function () {
            $this.text($(this).is(':visible') ? 'close' : 'open');
        });
    });
});

and would like to add a further function to the click function. I'm new to jQuery and tried to learn but still does not understand to read it. I thought I can create and append an if-clause but still struggle with that. So I have something like that:

$this.css($('.year').is(':visible') ? 'color', 'red' : 'color', 'green');
if the click function takes place and the .contents is visible change the css setting of .year to red and if not use color green

It would be great if someone can help me out.

Thanks alot.

Answer 1

Probably you looking for something like

$this.css( 'color', $('.year').is(':visible') ? 'red' : 'green') );

You maybe also have to check if how is(':visible') works on the set of returned elements from $('.year') . Could be that is works different when some are visible and others aren't.

edit: as @adeneo points out, is(':visible') returns true if any element in the set is visible.

Answer 2

Perhaps this might work for you but the code is not as concise as your snippet:

if ($(".year").is(":visible")) {
   $this.css({ "color" : "red" });
} else {
   $this.css({ "color" : "green" });
}

Answer 3

Is it what you are looking for?

http://jsfiddle.net/m6WrV/4/

$(document).ready(function () {
    $('.content').hide();
    $('.slide').click(function () {
        var $this = $(this);
        $(this).siblings('.content').slideToggle(200, function () {
            $this.text($(this).is(':visible') ? 'click to close' : 'click to open');
            $(this).closest('.aai').find('.head').css('color', $(this).is(':visible') ? 'red' : 'green');
        });

    });
});