0

Seem more..issue（点击查看更多5-10次后操作变慢）

我已经修改了 See More.. 基于代码的技术在这里http://jsfiddle.net/hgxbf/ 我面临的问题是点击查看更多/少看 5-10 次后操作变得非常慢并且不展开/正确折叠。

       <div class="seeMore" />

由脚本动态添加

HTML 结构。

<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/

任何帮助真的很感激！

4

1 回答 1

2

我有一些空闲时间，所以我已经为你修好了。

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

我还应用了更方便的变量命名（所有 jquery 元素都以美元为前缀）并使顶部函数返回结果.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/

于 2012-06-14T05:55:56.247 回答