jquery toggle only half working
My toggle() only half works...
$('#show_hide_comments').toggle(function()
{
$('#show_hide_comments').attr('src','images/up.png');
$('.comments').fadeTo('slow', 0.01, function()
{
$(this).slideUp('slow',function()
{
});
});
}, function()
{
$('#show_hide_comments').attr('src','images/down.png');
alert('wtf');
$('.comments').slideDown('slow', function()
{
$(this).fadeTo('slow', 1, function()
{
});
});
});
The first half that hides .comments
works but the second half does not fire at all.
HTML:
<div class="comments_container">
<div class="show_hide_comments"><img id="show_hide_comments" src="images/down.png" width="19" height="10" alt="Expand" />
<div class="comments">
<div class="new_comment_container">
<div class="new_comment"><input id="comment" name="comment" type="text" value="your comment here..."></div>
<div class="author"><input id="name" name="name" type="text" value="your name"></div>
<div class="email"><input id="email" "name="email" type="text" value="your email"></div>
<div class="comment_check"><input id="comment_check" type="image" src="images/uncheck.png" HEIGHT="16" WIDTH="16" BORDER="0" ALT="Submit Comment!" DISABLED></div>
</div>
<div class="captcha">
<div class="captcha_statment">Mostly Dirty, Always:</div><div class="captcha_response"><input id="captcha_response" name="captcha_response" type="text" value="" size="5" maxlength="5"></div>
<div class="captcha_check"><input id="captcha_check" type="image" src="images/check.png" HEIGHT="16" WIDTH="16" BORDER="0" ALT="Submit Captcha!"></div>
<div class="captcha_result"></div>
</div>
<div class="the_comments">
<?php
$query = mysql_query("SELECT * FROM comments WHERE approved = 1 LIMIT 3");
while($comments = mysql_fetch_array($query))
开发者_Python百科 {
$date = date( 'F jS', strtotime($comments['date']));
echo '<div class="comment" id="'.$comments[id].'">'.$date.' - '.$comments[comment].' - '.$comments[name].'</div>';
}
?>
<div class="full_comments_toggle"><img id="full_comments_toggle" src="images/up.png" width="19" height="10" alt="Expand" />
<?
$query = mysql_query("SELECT * FROM comments WHERE approved = 1 LIMIT 3,10000");
$count = mysql_num_rows($query);
echo 'Show '. $count . ' more comments.';
?>
</div>
<div class="full_comments">
<?php
while($comments = mysql_fetch_array($query))
{
$date = date( 'F jS', strtotime($comments['date']));
echo '<div class="comment" id="'.$comments[id].'">'.$date.' - '.$comments[comment].' - '.$comments[name].'</div>';
}
?>
</div>
</div>
</div>
</div>
</div>
Since the JQuery seems to be ok... What kind of things would cause the toggle()
to break half way through?
I didn't actually try your code, but one thing I noticed that you have the $comments[id]
used as a DOM id both for the 'short' and the 'full' comments. This can break DOM manipulation in subtle ways (besides being invalid).
I suggest to change the part where you list the full comments like this:
echo '<div class="comment" id="full_'.$comments[id].'">'.$date.' - '.$comments[comment].' - '.$comments[name].'</div>';
update: I tried your code and it works both in FF 3.6.6 and IE 8 (click -> fadeout, click -> 'wtf', fadein). I think the error is somewhere else.
精彩评论