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>
当用户点击展开任何评论（oco间隙右侧的箭头）时，底部文字将更改为“查看更少”。
但是，与此同时，当我尝试运行查看更多/更少的脚本时，它失败了。 View / less应该更改以查看更多并删除溢出滚动条，但不会。
答案 0 :(得分：1)
我更改了您的click处理程序以避免使用toggleClass，因为您在评论展开箭头上使用了addClass和removeClass。
因此，如果已经通过展开箭头从myList-overflow移除了#myList类，toggleClass会将其恢复，这就是问题所在。
我还在脚本中将图标旋转选择器精确到这些箭头，因为复选标记也在旋转！
）
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>