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

Question

继this post后关于如何设置“阅读更多”的文本部分，以及this post设置两个并排的div，我一直在左浮动工作正常的问题 - 单击“阅读更多”将显示div中的其余文本，反之亦然“阅读更少”。但是，第二个div无法按预期工作 - 单击“Read More”隐藏第二个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> 

结果：

• 如果双方的div不展开，都显示了罚款。
• 如果div 1被展开且div 2不是，则div 1的文字会按预期展开。 Div 2保持不变。
• 如果div 2展开且div 1不是，div 2的文本保持缩小。两个div的省略号（...）都消失了。
• 如果两个div都展开，div 1的文本会按预期扩展，div 2的文本保持缩小。当它不是为了时，Div 1仍然显示它的省略号。

Answer 1

你只需要一个整理的代码...

这里是小提琴：https://jsfiddle.net/bgssveqq/5/

部分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(); 
     });