javascript - 切换/滑动展开有效，但折叠不适用于 HTML 箭头。

Question

我希望滑动/切换带有 html 实体（箭头）的 div 作为切换触发器。一切正常，除非当 div 展开时，向上箭头不会切换内容备份。

这是一个演示小提琴： http: //jsfiddle.net/8tkmW/ - 展开有效，折叠无效。
（不知道↑放里面是否有效）

任何帮助appriciated，谢谢。

Answer 1

您应该使用一个在框折叠或展开时将切换的类。在下面的示例中，我一直在使用collapsedclass.

Here's a Demo

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="#">&#8595;</a><br/>');
        var link = div.next();
        link.click(function(e) {
            e.stopPropagation();
            if (link.hasClass('collapsed')) {
                link.html('&#8593;');
                div.animate({
                    'height': h
                });
                link.removeClass('collapsed')
            } else {
                div.animate({
                    'height': collapsedSize
                });
                link.addClass('collapsed')
                link.html('&#8595;');
            }

        });
    }

});