HTML:
<div class="interview">
<h4>Interview</h4>
<a href="#" class="question">This is question 1?</a>
<div class="answer">This is an answer!</div>
<a href="#" class="question">This is question 2?</a>
开发者_JAVA技巧 <div class="answer">This is an answer!</div>
<a href="#" class="question">This is question 3?</a>
<div class="answer">This is an answer!</div>
</div>
jQuery:
if ($('interview')[0]) {
$('interview .question').toggle(function () {
$(this).next('.answer').slideIn();
},
function () {
$(this).next('.answer').slideOut();
});
}
... I can't figure out why it isn't working.
Mind the dot:
.interview
Also, there is no slideIn, try slideDown
and slideUp
: http://jsbin.com/ajawo3
If you don't have any other code in these functions, a better choice is slideToggle
: http://api.jquery.com/slideToggle/
You are using a class selector and it should begin with a .
So you have to change
$('interview .question')
to
$('div.interview .question')
Heres a simple version...
$('a.question').click(function () {
$(this).next('.answer').slideToggle();
});
精彩评论