【发布时间】:2013-05-27 17:28:57
【问题描述】:
我希望滑动/切换带有 html 实体(箭头)的 div 作为切换触发器。 一切正常,除非当 div 展开时,向上箭头不会切换内容备份。
这是一个演示小提琴:http://jsfiddle.net/8tkmW/ - 展开有效,折叠无效。
(不知道↑放里面是否有效)
任何帮助,谢谢。
【问题讨论】:
标签: javascript jquery slidetoggle
我希望滑动/切换带有 html 实体(箭头)的 div 作为切换触发器。 一切正常,除非当 div 展开时,向上箭头不会切换内容备份。
这是一个演示小提琴:http://jsfiddle.net/8tkmW/ - 展开有效,折叠无效。
(不知道↑放里面是否有效)
任何帮助,谢谢。
【问题讨论】:
标签: javascript jquery slidetoggle
您应该使用一个可以在框折叠或展开时切换的类。在下面的示例中,我一直使用collapsed 类。
var collapsedSize = '40px';
$('.content').each(function() {
var h = this.scrollHeight;
console.log(h);
var div = $(this);
if (h > 30) {
div.css('height', collapsedSize);
div.after('<a class="arrow-link collapsed" href="#">↓</a><br/>');
var link = div.next();
link.click(function(e) {
e.stopPropagation();
if (link.hasClass('collapsed')) {
link.html('↑');
div.animate({
'height': h
});
link.removeClass('collapsed')
} else {
div.animate({
'height': collapsedSize
});
link.addClass('collapsed')
link.html('↓');
}
});
}
});
【讨论】: