閱讀更多腳本和並排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(); 
     });