切换/幻灯片展开工作,但折叠不适用于HTML箭头。

时间:2013-05-27 08:37:18

标签: javascript jquery slidetoggle

我希望将带有html实体(箭头)的div的幻灯片/切换作为切换的触发器。 一切正常,除非展开div,向上箭头不会切换内容。

这是一个演示小提琴:http://jsfiddle.net/8tkmW/ - 展开作品,折叠没有。
(不知道是否有效放入其中)

感谢任何帮助,谢谢。

1 个答案:

答案 0 :(得分:1)

您应该使用在折叠或展开框时切换的类。在以下示例中,我一直使用collapsed类。

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;');
            }

        });
    }

});