【发布时间】：2023-03-27 05:01:01
【问题描述】：
我只想为用户单击的那个框展开并减少滑块 div。 我能够做到这一点，但是当我单击阅读更多时，所有框都在扩展，这是我不想要的。 我只希望特定的框展开，其余的框不展开。
这是我正在做的事情：
<style>
#readmore1 {display: none;}
#readmore2 {display: none;}
#readmore3 {display: none;}
</style>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-md-4 testSliderBox">
<img class="testiSliderImageRound" src="assets/img/mbbs/m/internal-germany.jpg" alt="testimonial-PGmedica" width="120" height="120">
<h4 class="testiSliderHeading">Mark Allen</h4>
<p class="testiSliderPara">
<i class="fa fa-quote-left" aria-hidden="true" style="color:#C8C2C2"></i> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <span id="readdots1">...</span><span id="readmore1">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</span>
<a class="float-right" onclick="myFunction1()" id="myBtn1" style="margin-bottom:10px;">Read more</a>
<i class="fa fa-quote-right" aria-hidden="true" style="color:#C8C2C2"></i>
</p>
</div> <!-- inside col-md-4 end Slider 1 -->
<div class="col-md-4 testSliderBox">
<img class="testiSliderImageRound" src="assets/img/mbbs/m/internal-germany.jpg" alt="testimonial-PGmedica" width="120" height="120">
<h4 class="testiSliderHeading">Mark Allen</h4>
<p class="testiSliderPara">
<i class="fa fa-quote-left" aria-hidden="true" style="color:#C8C2C2"></i> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <span id="readdots2">...</span><span id="readmore2">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</span>
<a class="float-right" onclick="myFunction2()" id="myBtn2" style="margin-bottom:10px;">Read more</a>
<i class="fa fa-quote-right" aria-hidden="true" style="color:#C8C2C2"></i>
</p>
</div> <!-- inside col-md-4 end Slider 1 -->
<div class="col-md-4 testSliderBox">
<img class="testiSliderImageRound" src="assets/img/mbbs/m/internal-germany.jpg" alt="testimonial-PGmedica" width="120" height="120">
<h4 class="testiSliderHeading">Mark Allen</h4>
<p class="testiSliderPara">
<i class="fa fa-quote-left" aria-hidden="true" style="color:#C8C2C2"></i> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <span id="readdots1">...</span><span id="readmore1">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum v lorem ipsum lorem ipsum</span>
<a class="float-right" onclick="myFunction3()" id="myBtn3" style="margin-bottom:10px;">Read more</a>
<i class="fa fa-quote-right" aria-hidden="true" style="color:#C8C2C2"></i>
</p>
</div> <!-- inside col-md-4 end Slider 1 -->
</div> <!-- inside row end -->
</div> <!-- inside container end -->
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" style="">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" style="width:85px;">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
function myFunction1() {
var dots = document.getElementById("readdots1");
var moreText = document.getElementById("readmore1");
var btnText = document.getElementById("myBtn1");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
function myFunction2() {
var dots = document.getElementById("readdots2");
var moreText = document.getElementById("readmore2");
var btnText = document.getElementById("myBtn2");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
function myFunction3() {
var dots = document.getElementById("readdots3");
var moreText = document.getElementById("readmore3");
var btnText = document.getElementById("myBtn3");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
当我点击“readmore”时，我希望只有那个特定的框展开，其余的框不会展开。 请检查我做错了什么。 欢迎提出建议
【问题讨论】：
-
你从 w3schools 复制了
JS？？ -
请去掉jquery标签，因为在这个例子中你没有使用jquery。
标签： javascript html css bootstrap-4