我在这方面遇到了很多麻烦。我需要更改这些“阅读更多/更少”按钮，以便当文本展开并再次返回时，“阅读更多”一词更改为“阅读更少”。我尝试过使用 readmore.js 但无法让它工作。所以我正在努力做我自己的事情。但即使这样也行不通，因为我不太擅长 Javascript。这是我得到的。我知道这很糟糕。感谢您提供的任何帮助。我还需要使该按钮仅适用于其上方的 div。不是全部。
HTML
<html>
<head>
<title>jQuery Read More/Less Toggle</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$(".more").animate({height: "290"});
});
$(".btn2").click(function(){
$(".more").animate({height: "90px"});
});
});
</script>
</head>
<body>
<div class="container">
<div class="more" id="more1">
Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa. Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa. Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
<div class="btn1" for="more1">
<p class="btn_text">Read More ⋁</p>
______________________________________________
</div>
<div class="btn2" for="more1">
<p class="btn_text">Read Less ⋀</p>
______________________________________________
</div>
</div>
<div class="container">
<div class="more">
Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa. Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa. Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
<div class="btn">
<p class="btn_text">Read More ⋁</p>
______________________________________________
</div>
<div class="btn2" for="more1">
<p class="btn_text">Read Less ⋀</p>
______________________________________________
</div>
</div>
</body>
</html>
CSS
.more {
width: 600px;
overflow: hidden;
height: 90px;
}
.btn1 {
cursor: pointer;
width: 500px;
}
.btn2 {
cursor: pointer;
width: 500px;
}
.btn_text {
margin-bottom: -10px;
}
最佳答案
尝试使用 .data() 设置/获取展开状态，并使用 .html() 切换文本，
$(document).ready(function () {
$('.btn').data("expanded",false);
$(".btn").click(function () {
var val = $(this).data('expanded');
$(this).data('expanded', !val);
$('p', this).html(val ? "Read More ⋁" : "Read Less ⋀");
$(".more",$(this).closest('.container')).animate({
height: val ? '90' : "290"
});
});
});
DEMO
关于javascript - 动画高度切换以了解更多/更少，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33322124/