这是我的代码笔，可以查看我的位置。我希望在 div 展开时将“阅读更多”更改为“阅读更少”，然后在关闭时返回“阅读更多”，等等。
我想也许要检查 .expand-btn 是否有类 .view 然后做一个条件来改变 innerHTML 但我没有太多运气，也许我只是做错了。
任何帮助，将不胜感激。
$(".expand-container").each(function() {
var _this = $(this);
_this.find("a").click(function() {
_this.find(".expand-text").toggleClass('expand');
_this.find(".expand-btn").toggleClass('view');
});
if (_this.find(".expand-btn").hasClass("view")) {
}
});.col {
width: 20rem;
}
.expand {
max-height: 900px !important;
}
.expand-container {
position: relative;
width: 100%;
height: auto;
}
.expand-text {
position: relative;
height: auto;
max-height: 45px;
overflow: hidden;
transition: ease-in-out 0.25s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<h2>title1</h2>
<div class="expand-container">
<p class="expand-text">
Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet
nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt.
</p>
<a href="javascript:;" class="expand-btn">Read more</a>
</div>
</div>你可以这样做：
_this.find(".expand-btn").text((_this.find(".expand-btn").text() == "Read more" ? "Read less":"Read more"))
为了更好地理解上面的代码，你可以阅读下面的例子。
if(_this.find(".expand-btn").text() == "Read more") {
_this.find(".expand-btn").text("Read less")
} else {
_this.find(".expand-btn").text("Read more")
}
演示
$(".expand-container a").click(function() {
var _this = $(this);
_this.prev(".expand-text").toggleClass('expand');
_this.text((_this.text() == "Read more" ? "Read less" : "Read more")).toggleClass('view');
_this.next('img').attr("src", _this.next('img').attr("src") == 'https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-up-thin.png' ? "https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-down-thin.png" : "https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-up-thin.png")
});.col {
width: 20rem;
}
.expand {
max-height: 900px !important;
}
.expand-container {
position: relative;
width: 100%;
height: auto;
}
.expand-text {
position: relative;
height: auto;
max-height: 45px;
overflow: hidden;
transition: ease-in-out 0.25s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<h2>title1</h2>
<div class="expand-container">
<p class="expand-text">
Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet
nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt.
</p>
<a href="javascript:;" class="expand-btn">Read more</a><img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-arrow-down-thin.png" style="height:10px;width:10px;" />
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句