【问题标题】:Toggle/Slide expand works, but collapse does not work with HTML Arrow.切换/滑动展开有效,但折叠不适用于 HTML 箭头。
【发布时间】:2013-05-27 17:28:57
【问题描述】:

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

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

任何帮助,谢谢。

【问题讨论】:

    标签: javascript jquery slidetoggle


    【解决方案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;');
                }
    
            });
        }
    
    });
    

    【讨论】:

    • 嗯,这段代码似乎在 IE9 中不起作用 - 有什么问题吗?
    • 我在 IE9 中打开了演示小提琴,内容被展开(没有箭头显示)。可能是我的浏览器有问题。如果你在 IE9 中打开它,小提琴在你身边工作吗?
    • 不幸的是,我的 ubuntu 上没有 IE。检查控制台是否有警告或错误。你也可以开个新帖
    猜你喜欢
    • 2013-09-20
    • 1970-01-01
    • 1970-01-01
    • 2018-07-10
    • 1970-01-01
    • 1970-01-01
    • 2020-08-21
    • 2017-07-01
    • 2020-11-16
    相关资源
    最近更新 更多