Jquery expanding divs by class
I am having trouble with an if statement in the following code, I am trying to trigger an event if a div has a class, which is added and subtracted in a code. Is this the correct way to do this? Because it isn't working?
$(document).ready(function() {
$('.content_accrd').css({
"height": "0px"
});
$('.content_accrd:eq(0)').addClass("open").css({
"height": "110px"
});
$('.paneltop:eq(0)').css({
"background-开发者_如何转开发position": "0px 0px"
})
$('.paneltop').click(function() {
**if ($(this).siblings('.content_accrd').attr('class') != "open")** {
$(this).addClass("open").css({
"background-position": "0px 0px"
}).siblings('.content_accrd').animate({
"height": "110px"
}, 200)
} else {
$(this).reomveclass("open").css({
"background-position": "0px -21px"
}).siblings('.content_accrd').animate({
"height": "0px"
}, 200);
}
})
})
You want to use the hasClass function:
$('.paneltop').click(function() {
if ($(this).siblings('.content_accrd').hasClass('open')) {
$(this).removeclass("open").css({
"background-position": "0px -21px"
}).siblings('.content_accrd').animate({
"height": "0px"
}, 200);
} else {
$(this).addClass("open").css({
"background-position": "0px 0px"
}).siblings('.content_accrd').animate({
"height": "110px"
}, 200)
}
})
Swapped the order to avoid having to use ! :D
removeClass was spelled wrong as well.
Change to:
if ($(this).siblings('.content_accrd').hasClass('open'))
You can try the .hasClass()
method:
if ($(this).siblings('.content_accrd').hasClass('open')) {
http://api.jquery.com/hasClass/
You should be doing it like this:
if ($(this).siblings('.content_accrd').hasClass('open')) {
// ...
}
However, that leaves open the question: what is this test supposed to do? Test any sibling for having that class? One specific sibling? You should make that explicit.
精彩评论