我建立的循环有一点问题。这是我第一次尝试使用 jQuery 构建循环。这是一个简单的阅读更多/更少按钮。
我遇到的问题很奇怪。当页面第一次加载时它工作得很好,但在那之后的任何时候,它都会运行整个事情而不考虑对 ID 的更改。
HTML:
<div class="inner_container" id="tag_info"><?php?></div>
<a id="read_more">read more ></a>
jQuery:
$('a#read_more').click(function() {
$('#tag_info').stop().animate({
height: '100%'
}, 500 );
$(this).text('< read less');
$(this).removeAttr('id');
$(this).attr('id', 'read_less');
$('a#read_less').click(function() {
$('#tag_info').stop().animate({
height: '50px'
}, 500 );
$(this).text('read more >');
$(this).removeAttr('id');
$(this).attr('id', 'read_more');
});
});
CSS:[不需要锚样式]
#tag_info {
height: 50px;
overflow: hidden;
}
发生的事情(第一次之后的任何时间)是 div 将立即动画到第一次单击函数中设置的高度,然后跳回到第二次单击函数中设置的高度。
如果我将它们分成两个不同的点击功能,第二个不起作用。最令人困惑的是它工作一次,然后无法正常工作。有什么建议么?