似乎更多问题(单击查看更多 5-10 次后操作速度变慢）

Seem more..issue (Operation slows down after clicking see more 5-10 times)

本文关键字：操作 速度 问题 单击 5-10      更新时间：2023-09-26

>看起来更多..问题（点击查看更多5-10次后操作速度变慢）

我修改了 查看更多.. 基于此处代码的技术 http://jsfiddle.net/hgxbf/我面临的问题是单击"查看更多/查看更少"5-10次后，操作变得非常慢并且无法正确展开/折叠。

       <div class="seeMore" />

由脚本动态添加

网页结构。

<div class="Blk">
    <div class="Title">
        Donec at elit sed metus placerat placerat congue ut purus
    </div>
    <p class="trunc">
                                    Proin ipsum lectus, facilisis sed ornare eget, egestas vel mi. Nullam ac odio arcu. Nunc congue, urna vitae malesuada consequat, leo erat bibendum nunc, et fringilla nibh diam ac tellus. Sed quis ante a ipsum placerat fermentum. Aliquam erat volutpat. Praesent rutrum ornare lectus tincidunt suscipit.
    </p>
    <div class="seeMore">
        <span>SEE MORE</span>
    </div>                          
</div>

我的代码 http://jsfiddle.net/y4GXL/1/

任何帮助真的很感激！

我有一些空闲时间，所以我为你修复了它。

基本上，您必须保留对"查看更多/查看更少"元素的引用并保留一个状态变量。在点击处理程序中，您决定根据状态采取行动;折叠或展开。每次状态更改后，您都会更新"按钮"文本和状态。

我还应用了更方便的变量命名（所有jquery元素都以美元为前缀），并使top函数返回.each的结果;否则jQuery链就会被破坏。

(function($) {
    $.fn.truncateText = function(maxWords) {
        return this.each(function() {
            var $el = $(this),
            origText = $el.text(),
            truncText = origText.split(' '),
            state,
            $toggleButton;
            // decide whether to place a button    
            if (truncText.length <= maxWords) {
                return;
            }
            truncText.length = maxWords;
            truncText = truncText.join(' ');
            // add button and define click handler    
            $toggleButton = $('<div class="seeMore"></div>')
                .insertAfter($el)
                .on('click', function() {
                    if ('open' == state) {
                        collapse(); // old state was open, so close it
                    } else {
                        expand(); // old state was closed, so open it
                    }
                });
            function collapse()
            {
                $el.text(truncText + ' ...');
                state = 'closed';
                $toggleButton.text('See More');
            }
            function expand()
            {
                $el.text(origText);
                state = 'open';
                $toggleButton.text('See Less');
            }
            collapse();
        });
    }
})(jQuery);
$(".trunc").truncateText(4);​

在这里行动： http://jsfiddle.net/y4GXL/6/

相关文章：