Kommentare Inhalt zeigen/Zusammenbruch nicht mit Kommentaren arbeiten mehr/weniger

var commentCount = $('.review-history-comment').length; 
 
$('.total-count').html(commentCount); 
 

 
var commentsCountLi = $('#myList').children("li").length; 
 
if (commentsCountLi <= 0) { 
 
    $('#myList').parent('.request-action-info').addClass('no-history'); 
 
} 
 

 
var ul = $('#myList'), ulh = ul.height(), h = 0; 
 

 
ul.children('li').each(function(i) { 
 
    if(i===4) { 
 
     return false; 
 
    } 
 
    h += this.offsetHeight;   
 
}); 
 

 
$(".review-history-comment-icons").click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).toggleClass("icon-rotate"); 
 
    $(this).next(".review-history-comment-desc").toggle();   
 
    if ("$('#myList'):hasClass(.myList-overflow)") { 
 
    $("#myList").removeClass("myList-overflow");   
 
    } 
 
    if ($(".review-history-comment-desc").is(':visible')) { 
 
    $("#myList").removeClass("myList-overflow"); 
 
     $('#myList-toggle').text("View Less -"); 
 
     if ($('#myList-toggle').text("View Less -")) { 
 
     $("#myList").removeClass("myList-overflow"); 
 
     } 
 
    } 
 
    else if ($(".review-history-comment-desc").is(':hidden')){ 
 
    $("#myList").addClass("myList-overflow"); 
 
    $('#myList-toggle').text("View More +"); 
 
    } 
 
}); 
 

 
ul.css({'height':h+'px'}); 
 
$('#myList-toggle').click(function() { 
 
    ul.animate({'height':(ul.height()>h?h:ulh)+'px'}); 
 
    ($(this).text() === "View More +") ? $(this).text("View Less -") : $(this).text("View More +"); 
 
    $("#myList").toggleClass("myList-overflow"); 
 
    return false; 
 
});

.align-right { 
 
    float: right; 
 
} 
 

 
ol, ul { 
 
    list-style: none; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
/* line 49, ../sass/base.scss */ 
 
.align-left { 
 
    float: left; 
 
} 
 
/* Request Action */ 
 
/* line 25, ../sass/request-details.scss */ 
 
.request-action { 
 
    margin-top: 20px; 
 
} 
 

 
/* line 28, ../sass/request-details.scss */ 
 
.request-action-header { 
 
    background: #5D5D5D; 
 
    color: #FFF; 
 
    padding: 10px 20px; 
 
    border-radius: 3px; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
} 
 

 
/* line 36, ../sass/request-details.scss */ 
 
.request-action-form { 
 
    background: #FFF; 
 
    padding: 20px; 
 
    border-width: 0 1px 1px 1px; 
 
    border-radius: 3px; 
 
    border: 1px solid #DEDEDE; 
 
} 
 

 
/* line 43, ../sass/request-details.scss */ 
 
.request-action-form .request-action-form-area { 
 
    background: #EEE; 
 
    padding: 20px; 
 
    overflow: hidden; 
 
} 
 

 
/* line 48, ../sass/request-details.scss */ 
 
.request-action-form form .button { 
 
    margin-top: 10px; 
 
} 
 

 
/* line 51, ../sass/request-details.scss */ 
 
.request-action-info { 
 
    max-height: 310px; 
 
    overflow-y: auto; 
 
    min-height: 310px; 
 
    background: #FFF; 
 
    border: 1px solid #DEDEDE; 
 
    border-bottom: 0; 
 
} 
 

 
/* line 59, ../sass/request-details.scss */ 
 
.no-history { 
 
    background: #FFF url("../images/no-history.png") center center no-repeat; 
 
    background-size: 242px 130px; 
 
} 
 

 
/* Review History */ 
 
/* line 65, ../sass/request-details.scss */ 
 
.review-history-comment { 
 
    background: #FFF; 
 
    padding: 15px 10px; 
 
    overflow: hidden; 
 
    border-bottom: 1px solid #DEDEDE; 
 
    border-width: 0 1px 1px 1px; 
 
} 
 

 
/* line 72, ../sass/request-details.scss */ 
 
.review-history-comment .comment-type { 
 
    font-weight: 600; 
 
    font-size: 15px; 
 
    color: #474747; 
 
} 
 

 
/* line 77, ../sass/request-details.scss */ 
 
.review-history-comment .comment-history { 
 
    font-weight: 600; 
 
    font-size: 15px; 
 
} 
 

 
/* line 81, ../sass/request-details.scss */ 
 
.review-history-comment .comment-history.approved { 
 
    color: #4E8A0B; 
 
} 
 

 
/* line 84, ../sass/request-details.scss */ 
 
.comment-by a, .comment-date { 
 
    font-size: 12px; 
 
    padding-right: 10px; 
 
    margin-top: 5px; 
 
    display: inline-block; 
 
} 
 

 
/* line 90, ../sass/request-details.scss */ 
 
.review-history-comment-data { 
 
    margin-left: 10px; 
 
} 
 

 
/* line 93, ../sass/request-details.scss */ 
 
.myList-overflow { 
 
    overflow: hidden; 
 
} 
 

 
/* line 96, ../sass/request-details.scss */ 
 
.review-history-comment-desc { 
 
    display: none; 
 
    padding-top: 10px; 
 
    margin-left: 10px; 
 
    word-break: break-all; 
 
    position: relative; 
 
} 
 

 
.show-comments { 
 
    display: block; 
 
} 
 

 
/* line 103, ../sass/request-details.scss */ 
 
.review-history-comment-icons.icon-rotate i { 
 
    transform: rotate(-180deg); 
 
    position: relative; 
 
    top: 14px; 
 
    right: -3px; 
 
} 
 

 
/* line 109, ../sass/request-details.scss */ 
 
.review-history-comment-icons:hover { 
 
    cursor: hand; 
 
    cursor: pointer; 
 
} 
 

 
/* line 113, ../sass/request-details.scss */ 
 
.review-history-comment-icons i { 
 
    color: #048EC2; 
 
    height: 20px; 
 
    width: 20px; 
 
    font-size: 22px; 
 
    padding: 5px; 
 
    margin-right: 10px; 
 
} 
 

 
/* line 121, ../sass/request-details.scss */ 
 
.review-history-comment-footer { 
 
    background: #FFF; 
 
    border: 1px solid #DEDEDE; 
 
    border-width: 0 1px 1px 1px; 
 
    border-radius: 3px; 
 
    font-size: 14px; 
 
    font-weight: 600; 
 
    color: #9B9B9B; 
 
    padding: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="request-action"> 
 
    <h4 class="request-action-header">Review History</h4> 
 
    <div class="request-action-info"> 
 
    <ul id="myList" class="myList-overflow"> 
 
     <li> 
 
     <div class="review-history-comment"> 
 
      <div class="review-history-comment-icons align-left"> 
 
      <i class="fa fa-check fa-lg" aria-hidden="true"></i> 
 
      <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-data align-left"> 
 
      <span class="comment-type">OCO Clearance: </span><span class="comment-history approved">Approved</span> 
 
      <br> 
 
      <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
      </div> 
 
      <div class="review-history-comment-icons text-right icon-rotate"> 
 
      <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-desc clear"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="review-history-comment"> 
 
      <div class="review-history-comment-icons align-left"> 
 
      <i class="fa fa-commenting fa-lg" aria-hidden="true"></i> 
 
      <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-data align-left"> 
 
      <span class="comment-type">Referral Comment </span> 
 
      <br> 
 
      <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="review-history-comment"> 
 
      <div class="review-history-comment-icons align-left"> 
 
      <i class="fa fa-check fa-lg" aria-hidden="true"></i> 
 
      <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-data align-left"> 
 
      <span class="comment-type">OCO Clearance: </span><span class="comment-history approved">Approved</span> 
 
      <br> 
 
      <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
      </div> 
 
      <div class="review-history-comment-icons text-right icon-rotate"> 
 
      <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-desc clear"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="review-history-comment"> 
 
      <div class="review-history-comment-icons align-left"> 
 
      <i class="fa fa-commenting fa-lg" aria-hidden="true"></i> 
 
      <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-data align-left"> 
 
      <span class="comment-type">Referral Comment </span> 
 
      <br> 
 
      <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="review-history-comment"> 
 
      <div class="review-history-comment-icons align-left"> 
 
      <i class="fa fa-check fa-lg" aria-hidden="true"></i> 
 
      <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-data align-left"> 
 
      <span class="comment-type">OCO Clearance: </span><span class="comment-history approved">Approved</span> 
 
      <br> 
 
      <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
      </div> 
 
      <div class="review-history-comment-icons text-right icon-rotate"> 
 
      <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-desc clear"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="review-history-comment"> 
 
      <div class="review-history-comment-icons align-left"> 
 
      <i class="fa fa-commenting fa-lg" aria-hidden="true"></i> 
 
      <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-data align-left"> 
 
      <span class="comment-type">Referral Comment </span> 
 
      <br> 
 
      <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
      </div> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="review-history-comment-footer"> 
 
    <div class="row"> 
 
    <div class="col-md-6">          
 
     Total Comments: <span class="total-count"></span> 
 
    </div> 
 
    <div class="col-md-6 text-right"> 
 
     <a href="#" id="myList-toggle">View More +</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div>

Wenn ein Benutzer auf keine Kommentare erweitern klickt (der Pfeil auf der rechten Seite von OCO-Clearance), der untere Text ändert sich zu "weniger anzeigen".

Aber zur gleichen Zeit, wenn ich versuche, mehr/weniger Skript anzuzeigen, schlägt es fehl. View/less sollte sich ändern, um mehr anzuzeigen und die Überlauf-Bildlaufleiste zu entfernen, tut dies aber nicht.

Quelle

2017-03-16 Kunal Vijan

Ich habe Ihren Handler click geändert, um die Verwendung von toggleClass zu vermeiden, weil Sie addClass und removeClass für die Kommentar-Erweiterungspfeile verwenden.

Wenn also die myList-overflow Klasse bereits von über einen Erweiterungspfeil entfernt wurde, wird toggleClass es zurückstellen und das ist das Problem.

Ich präzisierte auch die Symbolrotation diese Pfeile im Skript, da die Häkchen auch rotierten!

;)

var commentCount = $('.review-history-comment').length; 
 
    $('.total-count').html(commentCount); 
 

 
    var commentsCountLi = $('#myList').children("li").length; 
 
    if (commentsCountLi <= 0) { 
 
     $('#myList').parent('.request-action-info').addClass('no-history'); 
 
    } 
 

 
    var ul = $('#myList'), ulh = ul.height(), h = 0; 
 

 
    ul.children('li').each(function(i) { 
 
     if(i===4) { 
 
      return false; 
 
     } 
 
     h += this.offsetHeight;   
 
    }); 
 

 
    $(".review-history-comment-icons.text-right").click(function(e) { 
 
     e.preventDefault(); 
 
     $(this).toggleClass("icon-rotate"); 
 
     $(this).next(".review-history-comment-desc").toggle();   
 
     if ("$('#myList'):hasClass(.myList-overflow)") { 
 
     $("#myList").removeClass("myList-overflow");   
 
     } 
 
     if ($(".review-history-comment-desc").is(':visible')) { 
 
     $("#myList").removeClass("myList-overflow"); 
 
      $('#myList-toggle').text("View Less -"); 
 
      if ($('#myList-toggle').text("View Less -")) { 
 
      $("#myList").removeClass("myList-overflow"); 
 
      } 
 
     } 
 
     else if ($(".review-history-comment-desc").is(':hidden')){ 
 
     $("#myList").addClass("myList-overflow"); 
 
     ul.animate({'height':h+'px'}); 
 
     $('#myList-toggle').text("View More +"); 
 
     } 
 
    }); 
 

 
    // =========================================== HERE ARE ALL CHANGES 
 
    ul.css({'height':h+'px'}); 
 
    $('#myList-toggle').click(function() { 
 
    
 
     if($(this).text() === "View More +"){ 
 
     $(this).text("View Less -") 
 
     $("#myList").removeClass("myList-overflow"); 
 
     ul.animate({'height':ulh+'px'}); 
 
     }else{ 
 
     $(this).text("View More +"); 
 
     $("#myList").addClass("myList-overflow"); 
 
     $(".review-history-comment-desc").hide(); 
 
     $(".review-history-comment-icons.text-right").addClass("icon-rotate"); 
 
     ul.animate({'height':h+'px'}); 
 
     } 
 
     // =========================================== 
 
     return false; 
 
    });

.align-right { 
 
     float: right; 
 
    } 
 

 
    ol, ul { 
 
     list-style: none; 
 
    } 
 

 
    .clear { 
 
     clear: both; 
 
    } 
 

 
    /* line 49, ../sass/base.scss */ 
 
    .align-left { 
 
     float: left; 
 
    } 
 
    /* Request Action */ 
 
    /* line 25, ../sass/request-details.scss */ 
 
    .request-action { 
 
     margin-top: 20px; 
 
    } 
 

 
    /* line 28, ../sass/request-details.scss */ 
 
    .request-action-header { 
 
     background: #5D5D5D; 
 
     color: #FFF; 
 
     padding: 10px 20px; 
 
     border-radius: 3px; 
 
     font-size: 18px; 
 
     font-weight: normal; 
 
    } 
 

 
    /* line 36, ../sass/request-details.scss */ 
 
    .request-action-form { 
 
     background: #FFF; 
 
     padding: 20px; 
 
     border-width: 0 1px 1px 1px; 
 
     border-radius: 3px; 
 
     border: 1px solid #DEDEDE; 
 
    } 
 

 
    /* line 43, ../sass/request-details.scss */ 
 
    .request-action-form .request-action-form-area { 
 
     background: #EEE; 
 
     padding: 20px; 
 
     overflow: hidden; 
 
    } 
 

 
    /* line 48, ../sass/request-details.scss */ 
 
    .request-action-form form .button { 
 
     margin-top: 10px; 
 
    } 
 

 
    /* line 51, ../sass/request-details.scss */ 
 
    .request-action-info { 
 
     max-height: 310px; 
 
     overflow-y: auto; 
 
     min-height: 310px; 
 
     background: #FFF; 
 
     border: 1px solid #DEDEDE; 
 
     border-bottom: 0; 
 
    } 
 

 
    /* line 59, ../sass/request-details.scss */ 
 
    .no-history { 
 
     background: #FFF url("../images/no-history.png") center center no-repeat; 
 
     background-size: 242px 130px; 
 
    } 
 

 
    /* Review History */ 
 
    /* line 65, ../sass/request-details.scss */ 
 
    .review-history-comment { 
 
     background: #FFF; 
 
     padding: 15px 10px; 
 
     overflow: hidden; 
 
     border-bottom: 1px solid #DEDEDE; 
 
     border-width: 0 1px 1px 1px; 
 
    } 
 

 
    /* line 72, ../sass/request-details.scss */ 
 
    .review-history-comment .comment-type { 
 
     font-weight: 600; 
 
     font-size: 15px; 
 
     color: #474747; 
 
    } 
 

 
    /* line 77, ../sass/request-details.scss */ 
 
    .review-history-comment .comment-history { 
 
     font-weight: 600; 
 
     font-size: 15px; 
 
    } 
 

 
    /* line 81, ../sass/request-details.scss */ 
 
    .review-history-comment .comment-history.approved { 
 
     color: #4E8A0B; 
 
    } 
 

 
    /* line 84, ../sass/request-details.scss */ 
 
    .comment-by a, .comment-date { 
 
     font-size: 12px; 
 
     padding-right: 10px; 
 
     margin-top: 5px; 
 
     display: inline-block; 
 
    } 
 

 
    /* line 90, ../sass/request-details.scss */ 
 
    .review-history-comment-data { 
 
     margin-left: 10px; 
 
    } 
 

 
    /* line 93, ../sass/request-details.scss */ 
 
    .myList-overflow { 
 
     overflow: hidden; 
 
    } 
 

 
    /* line 96, ../sass/request-details.scss */ 
 
    .review-history-comment-desc { 
 
     display: none; 
 
     padding-top: 10px; 
 
     margin-left: 10px; 
 
     word-break: break-all; 
 
     position: relative; 
 
    } 
 

 
    .show-comments { 
 
     display: block; 
 
    } 
 

 
    /* line 103, ../sass/request-details.scss */ 
 
    .review-history-comment-icons.icon-rotate i { 
 
     transform: rotate(-180deg); 
 
     position: relative; 
 
     top: 14px; 
 
     right: -3px; 
 
    } 
 

 
    /* line 109, ../sass/request-details.scss */ 
 
    .review-history-comment-icons:hover { 
 
     cursor: hand; 
 
     cursor: pointer; 
 
    } 
 

 
    /* line 113, ../sass/request-details.scss */ 
 
    .review-history-comment-icons i { 
 
     color: #048EC2; 
 
     height: 20px; 
 
     width: 20px; 
 
     font-size: 22px; 
 
     padding: 5px; 
 
     margin-right: 10px; 
 
    } 
 

 
    /* line 121, ../sass/request-details.scss */ 
 
    .review-history-comment-footer { 
 
     background: #FFF; 
 
     border: 1px solid #DEDEDE; 
 
     border-width: 0 1px 1px 1px; 
 
     border-radius: 3px; 
 
     font-size: 14px; 
 
     font-weight: 600; 
 
     color: #9B9B9B; 
 
     padding: 15px; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="request-action"> 
 
     <h4 class="request-action-header">Review History</h4> 
 
     <div class="request-action-info"> 
 
     <ul id="myList" class="myList-overflow"> 
 
      <li> 
 
      <div class="review-history-comment"> 
 
       <div class="review-history-comment-icons align-left"> 
 
       <i class="fa fa-check fa-lg" aria-hidden="true"></i> 
 
       <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-data align-left"> 
 
       <span class="comment-type">OCO Clearance: </span><span class="comment-history approved">Approved</span> 
 
       <br> 
 
       <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
       </div> 
 
       <div class="review-history-comment-icons text-right icon-rotate"> 
 
       <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-desc clear"> 
 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="review-history-comment"> 
 
       <div class="review-history-comment-icons align-left"> 
 
       <i class="fa fa-commenting fa-lg" aria-hidden="true"></i> 
 
       <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-data align-left"> 
 
       <span class="comment-type">Referral Comment </span> 
 
       <br> 
 
       <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="review-history-comment"> 
 
       <div class="review-history-comment-icons align-left"> 
 
       <i class="fa fa-check fa-lg" aria-hidden="true"></i> 
 
       <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-data align-left"> 
 
       <span class="comment-type">OCO Clearance: </span><span class="comment-history approved">Approved</span> 
 
       <br> 
 
       <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
       </div> 
 
       <div class="review-history-comment-icons text-right icon-rotate"> 
 
       <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-desc clear"> 
 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="review-history-comment"> 
 
       <div class="review-history-comment-icons align-left"> 
 
       <i class="fa fa-commenting fa-lg" aria-hidden="true"></i> 
 
       <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-data align-left"> 
 
       <span class="comment-type">Referral Comment </span> 
 
       <br> 
 
       <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="review-history-comment"> 
 
       <div class="review-history-comment-icons align-left"> 
 
       <i class="fa fa-check fa-lg" aria-hidden="true"></i> 
 
       <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-data align-left"> 
 
       <span class="comment-type">OCO Clearance: </span><span class="comment-history approved">Approved</span> 
 
       <br> 
 
       <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
       </div> 
 
       <div class="review-history-comment-icons text-right icon-rotate"> 
 
       <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-desc clear"> 
 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="review-history-comment"> 
 
       <div class="review-history-comment-icons align-left"> 
 
       <i class="fa fa-commenting fa-lg" aria-hidden="true"></i> 
 
       <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-data align-left"> 
 
       <span class="comment-type">Referral Comment </span> 
 
       <br> 
 
       <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
       </div> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="review-history-comment-footer"> 
 
     <div class="row"> 
 
     <div class="col-md-6">          
 
      Total Comments: <span class="total-count"></span> 
 
     </div> 
 
     <div class="col-md-6 text-right"> 
 
      <a href="#" id="myList-toggle">View More +</a> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    </div>

Quelle

2017-03-16 02:26:09

Vielen Dank für diese, aber ich kann immer noch ein Problem sehen, wenn der Benutzer auf mehr ersten und erweitern Sie dann jeden Kommentar klicken, wird, wird der Text weniger sehen ändern. wieder einmal, wenn Sie den Kommentar-Text klickt auf Ansicht mehr, es sollte auch die Bildlaufleiste n ausblenden andere li's –

Ich sehe. Ich habe das behoben. Sehen Sie sich einen Bearbeitungsverlauf für die Änderungen an. ;) –

Kommentare Inhalt zeigen/Zusammenbruch nicht mit Kommentaren arbeiten mehr/weniger

Antwort

Verwandte Themen