Javascript 阅读更多脚本和并排div不能正常工作

在介绍了如何为文本部分设置“readmore”以及设置两个并排div之后，我遇到了一个问题，左侧浮动div可以很好地工作-单击“readmore”显示div中的其余文本，反之亦然，则显示“readless”。但是，第二个div无法正常工作-单击“阅读更多”隐藏第二个div的文本，同时更改第一个div的省略号

更清楚地说：

//Script for Read More/Read Less
<script>
    $(document).ready(function() {
        var showChar = 200;
        var ellipsestext = "...";
        var moretext = "Read More";
        var lesstext = "Read 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><span class="morecontent"><span>' + h + '</span><div class="text-center margin_top_10"><a href="" class="morelink">'+moretext+'</a></div></span>';

                $(this).html(html);
            }

        });

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

<style>
    .comment {
        width: 100%;
        margin: 0 auto;
    }
    a.morelink {
        outline: none;
        color: #5bc0de !important;
    }
    .morecontent span {
        display: none;

    }
</style>

//First Div
<div class="container" style="width:620px; float:left;">
    <div class="row">
        <div class="comment more col-lg-8 col-lg-offset-2 text-center">
            <p class="comment more">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </div>
</div>
//Second Div
<div class="container" style="width:620px; float:right;">
    <div class="row">
        <div class="comment more col-lg-8 col-lg-offset-2 text-center">
            <p class="comment more">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>
<div style="clear:both">
</div>

//多读/少读脚本
$（文档）.ready（函数（）{
var-showChar=200；
var ellipseText=“…”；
var moretext=“阅读更多”；
var lesstext=“少读”；
$（'.more'）。每个（函数（）{
var content=$（this.html（）；
如果（content.length>showChar）{
var c=content.substr（0，showChar）；
var h=content.substr（showChar-1，content.length-showChar）；
var html=c+''+ellipseText+''+h+''；
$（this）.html（html）；
}
});
$（“.morelink”）。单击（函数（）{
if（$（this）.hasClass（“更少”））{
$（此）.removeClass（“更少”）；
$（this.html（moretext）；
}否则{
$（此）.addClass（“更少”）；
$（this.html（lesstext）；
}
$（“.moreelipses”）.toggle（）；
$（this.parent（）.prev（）.toggle（）；
$（this.prev（）.toggle（）；
返回false；
});
});
.评论{
宽度：100%；
保证金：0自动；
}
a、 莫林克{
大纲：无；
颜色：#5bc0de！重要；
}
.Morespan内容{
显示：无；
}
//第一组
Lorem ipsum Door sit amet，一位杰出的领导者，他在劳动和就业方面的贡献是暂时的。但是，在最低限度上，我们需要一个实验室来进行日常工作。

//第二组
两人或两人在婚姻中的相互尊重是不平等的。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

结果：

• 如果两个div都未展开，则两个div都显示良好
• 如果div1已展开，而div2未展开，则div1的文本将按预期展开。第二组保持不变
• 如果扩展了div 2而没有扩展div 1，则div 2的文本保持收缩状态。两个div的省略号（…）都消失了
• 如果两个div都展开，则div1的文本按预期展开，div2的文本保持收缩。div1在不需要的时候仍然显示省略号

---

您只需要整理一下代码

这是小提琴：

部分JS：

$(".morelink").on("click", function() {
          if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            }
            else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(this).parent().parent().children("p").children(".moreelipses").toggle();
            $(this).parent().parent().children("p").children(".morecontent").toggle();
        });

---

发布一个fiddle总是有帮助的：第一个没有复制我的问题-只有一个Read-More链接，而不是每个div都有一个。第二个解决了这个问题，在两个jsfiddle中，Read-More只隐藏文本，不扩展文本。很抱歉，我只是发布了你的代码的fiddle。。。我正在修复它：）。因此，单击Read More应展开该div only，单击Read Less应折叠并显示该div的

…

，对吗？是的。每一个多读/少读都不应该影响另一个分区（例如，如果单击了第2分区的多读，则第1分区的…不应该受到影响）。它没有正确地执行此操作-而是从压缩文本+省略号+多读到扩展文本+无省略号+少读，而是从无文本+多读到压缩文本+省略号+少读。