2

评论 div 中的 HTML 标签有问题，插入<p>something</p>标签时没有显示更多文本链接。它适用于纯文本。我想插入富文本，但它不起作用。

HTML

<div id="header">
<H2>
    Dynamically shortened Text with Show More link using jQuery
</H2>
</div>
<p>Click here to view the Tutorial: <a href="http://viralpatel.net/blogs/2010/12/dynamically-shortened-text-show-more-link-jquery.html">Shortened Text with Show More link</a></p>

<br/>
<div class="comment more">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum laoreet, nunc eget laoreet sagittis,
    quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
    Duis eget nisl orci. Aliquam mattis purus non mauris
    blandit id luctus felis convallis.
    Integer varius egestas vestibulum.
    Nullam a dolor arcu, ac tempor elit. Donec.</p>
</div>
<div class="comment more">
    Duis nisl nibh, egestas at fermentum at, viverra et purus.
    Maecenas lobortis odio id sapien facilisis elementum.
    Curabitur et magna justo, et gravida augue.
    Sed tristique pellentesque arcu quis tempor.
</div>
<div class="comment more">
    consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit.
    Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum.
    Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.
</div>

CSS

body, input{
    font-family: Calibri, Arial;
    margin: 0px;
    padding: 0px;
}
a {
    color: #0254EB
}
a:visited {
    color: #0254EB
}
#header h2 {
    color: white;
    background-color: #00A1E6;
    margin:0px;
    padding: 5px;
}
.comment {
    width: 400px;
    background-color: #f0f0f0;
    margin: 10px;
}
a.morelink {
    text-decoration:none;
    outline: none;
}
.morecontent span {
    display: none;

}

Javascript

$(document).ready(function() {
    var showChar = 100;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);

            var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

jsFiddle在这里

任何帮助将不胜感激。

4

2 回答 2

0

那是因为你正在服用var content = $(this).html();。html 有 a<p>并且当您使用 substr 时，您最终会得到格式错误的 html，并且没有结束标记（例如<p>Some Text）。不同的浏览器会以不同的方式处理格式错误的 html。您的morelink链接被放在外部，<p>并且切换最终将其隐藏。改用var content = $(this).text();或找到一个可以更好地处理这个问题的插件。

于 2013-03-28T12:08:24.383 回答
0

插件版（新功能）：

$.fn.showHideParagraph = function(settings){
    var config = $.extend({},  $.fn.showHideParagraph.config, settings);
    $(this).on({click: function () {
        var $this = $(this);
        if ($this.hasClass('less')) {
            $this.removeClass('less').html(config.moreText);
        } else {
            $this.addClass('less').html(config.lessText);
        }

        $this.parent().siblings('p:not(:first)').animate({opacity: 'toggle', height: 'toggle'});
        return false;
    }
    }, '.morePLink');

    return this.each(function () {
        var $this = $(this);
        if($this.hasClass("shortenedP")) return;

        $this.addClass("shortenedP");
        var paragraphs = $this.children('p');
        if (paragraphs.length > config.paragraphShowed) {
            paragraphs.not(":first").hide();

            paragraphs.first().append(" ...");
            var moreLess = '<span><a href="#" class="morePLink">'  + config.moreText + '</a></span>';
            $this.append(moreLess);
        }
    });
};

$.fn.showHideParagraph.config = {
    paragraphShowed: 1,
    ellipsesText: "...",
    moreText: 'more',
    lessText: 'less'
};

这支持 p 并且您可以配置 p 显示的数量。

小提琴：http: //jsfiddle.net/544HN/

于 2014-08-05T14:33:12.857 回答