Question

我在页面上有三个阅读更多链接并使用jquery切换这些正常工作。但我想要的时候，我点击阅读更多链接，完整的内容显示在另一个div与关闭按钮。这是我的代码： HTML：

<div class="comment more">
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.
</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>
<div class="dis">
 //the full content displayed here.
</div>

CSS：

a {
color: #0254EB
}
a:visited {
color: #0254EB
}
a.morelink {
text-decoration:none;
outline: none;
}
.morecontent span {
display: none;
}
.comment {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}
.dis{
display: none;
width: 300px;
height: 300px;
background-color: blue;
color: red;
}

JQUERY：

$(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="moreellipses">' + ellipsestext+ '&nbsp; </span><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;
});
});

链接：http://codepen.io/anon/pen/jqNMbQ

Answer 1

您可以将$（。morelink）.click（）函数更改为此。

$(".morelink").click(function(){

    if($(this).hasClass("less")) {

        $(this).removeClass("less"); 
        $(this).html(moretext);
        $('.dis').html('');
        $('.dis').hide();

    } else {
    var content = $(this).siblings('span').html();

        $(this).addClass("less");
        $(this).html(lesstext);
        $('.dis').html(content);
        $('.dis').show();

    }
   // $(this).parent().prev().toggle();
    //$(this).prev().toggle();
    return false;
});

希望这就是你想要的。

多个读取更多在同一个div中使用jquery的完整内容

1 个答案: