Question

似乎更多..问题（单击后操作减慢5-10次）

我已经根据此处的代码修改了“查看更多...技术”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/

任何真正有用的帮助！

Answer 1

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

基本上你必须保留一个对“see more / see less”元素的引用并保留一个状态变量。在点击处理程序中，您决定根据状态采取行动;崩溃或扩大。每次状态更改后，您都会更新“按钮”文本和状态。

我还应用了更方便的变量命名（所有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/

似乎更多..问题（点击后操作减慢了5-10次）

1 个答案: