Question

如何创建'Read More'功能对于父元素中的多个元素

例如：

    <div class="readmore">
        <h1>this Level 1 heading</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>

从上面的代码我想显示“readmore”div中只有100个字符，之后我想显示“Read More”Link

我也试过这段代码Click

Answer 1

最简单的方法是将您最初不想显示的文字换成＆lt; div＆gt; （给它一个逻辑名称）并设置＆＃34;显示＆＃34;该div的css属性为隐藏。然后在＆＃34;阅读更多＆＃34;链接，没有实际目的地，只是一个设置＆＃34;显示＆＃34; div上的样式显示为＆＃34; inline＆＃34;和＃34;显示＆＃34; ＆＃34;阅读更多＆＃34;链接到＆＃34;隐藏＆＃34;。如果你想切换额外的文本，它会有点复杂，但并非如此。关键是＆＃34;显示＆＃34; css属性。

Answer 2

下面的代码将为您提供技巧。请注意我对html结构做了一些更改。工作代码 here

var charcount =100;

$('#more').click(function(){debugger;
    $('#actualtext').html($('#readmore').html().substr(0, charcount));
    charcount+=charcount;

    if($('#actualtext').html().length == $('#readmore').html().length){
        $('#more').hide();
    }                                                 
});

Answer 3

添加此脚本：

function OkInfoDialog(thisTitle, thisText) {
//-------set the dialog window starting properties
$("#OkInfoDialog").dialog({
    autoOpen: false, resizable: false, modal: true, width: '800px', show: 'slideDown', hide: 'slideUp',
    closeOnEscape: false,
    buttons:
    {
        "OK": function () {
            $(this).dialog("close");
            $("#loading").fadeOut();
        }
    }
});//-------call for the dialog
$("#OkInfoDialogText").html(thisText);     //write the text in the text area
$("#OkInfoDialog").dialog('option', 'title', thisTitle).dialog('open'); //set the title and open the dialog

}

jquery对话框 - OkInfoDialog（标题，文字）此对话框接收仅用于创建信息对话窗口的标题和文本字符串一个OK按钮选项。用户将返回发送表单而不做任何更改。

然后您可以通过以下方式在您的页面上调用此脚本：

<a href="javascript: OkInfoDialog('Title here', '<br/>All more information you want to view ' );"  >more info</a>

如何使用jquery创建高级“阅读更多”

3 个答案: