Question

http://winteradagency.com/MessageBroadcast/applications.htm

在上面的页面中，我在div滚动区域内有框。在许多方框中，文本超出了框的大小，客户希望单击框放大，以便在单击“阅读更多”字样时可以在框中看到所有文本。

我通过dynamicdrive

查看了一个名为Collapsible DIV v2.2-的脚本

有关如何让第一个网址中的框展开的任何建议？

任何建议都将不胜感激。

Answer 1

要约束框的大小，请设置显式高度和overflow：hidden。然后，要显示所有内容，请设置height：auto。执行此操作的脚本应该是微不足道的。

Answer 2

我不记得如何只用javascript做这个，但你应该使用jquery。您应该更改文本并在第100个元素之后添加一个名为“read more”的链接，以便在用户单击此链接后，它可以恢复文本的其余部分并将面板容器设置为100％的高度。这就是我们的路线图。我刚刚创建了一个示例

$(document).ready(function() {

        var slicePoint = 100;
        var widow = 4;

        $('#area div.pane').each(function() {

            var allText = $(this).html();
            var startText = allText.slice(0, slicePoint).replace(/\w+$/, '');
            var endText = allText.slice(startText.length);
            if (endText.replace(/\s+$/, '').split(' ').length > widow) {
                $(this).html([startText,
                '<a href="#" class="more">read more..</a>',
                '<span class="details">',
                endText,
                '</span>'].join('')
                );
            }
        });


        //hide details until read-more is clicked

        $('span.details').hide();
        $('a.more').click(function() {
            $(this).hide().next('span.details').fadeIn();
            $('a.more').parent().animate({ 'height': '100%' });
            return false;
        });
    });

您的html文件可能如下所示。

<div id="area">
    <div class="pane">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit .......
    </div>
    <div class="pane">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit .......
    </div>
    <div class="pane">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit .......
    </div>
    <div class="pane">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit .......
    </div>
    <div class="pane">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit .......
    </div>
    ......
</div>

这里的内容是窗格，所以给出一个高度，即50px然后100％，这样整个文本应该是可见的就这样。
Source
希望这会有所帮助。

可折叠DIV - 它可以使BOX更宽吗？

2 个答案: