function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.querySelector("#moreButton p");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "table-cell";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('less')
} else {
showMoreText.style.display = "table-cell";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('less')
}
} .pink{
color: #FF7B5F;
}
#more {
display: none;
}
#moreButton{
background-color:transparent;
border-color: transparent;
}
.less{
color: #FF7B5F;
}
.more{max-width:20px;
} <div id="startpoint"></div>
<div id="more">
<div class="row">
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/RIZEK.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Sabahoo.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Securite.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/SIP.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Spectar.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/stake.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Standard Chartered.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Step.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Switzgroup.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Tarjama.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/WTTC.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Z&V.jpg" alt="">
</div>
</div>
</div>
<button onclick="toggleText()" id="moreButton">
<p class="pink">Show More</p>
<img class="more" src="https://e7.pngegg.com/pngimages/325/32/png-clipart-arrow-down-android-down-arrow-hand-desktop-wallpaper-thumbnail.png" alt="">
</button>
</div>我最近一直在為 java 腳本苦苦掙扎，因為我是一個菜鳥開發人員，但我終于通過創建一個功能性的 java 腳本來讓它作業了找出如何有一個向上箭頭來減少顯示，這很煩人。任何幫助將不勝感激。
uj5u.com熱心網友回復：
希望有幫助：
選擇您的圖示
var moreIcon = document.querySelector("#moreButton img");
less在圖示中切換類。
moreIcon.classList.add('less');
moreIcon.classList.remove('less');
添加較少的類時，使用 CSS 旋轉圖示
img.more.less {
transform: rotate(180deg);
}
function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.querySelector("#moreButton p");
var moreIcon = document.querySelector("#moreButton img");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "table-cell";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('less');
moreIcon.classList.remove('less');
} else {
showMoreText.style.display = "table-cell";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('less');
moreIcon.classList.add('less');
}
}.pink{
color: #FF7B5F;
}
#more {
display: none;
}
#moreButton{
background-color:transparent;
border-color: transparent;
}
.less{
color: #FF7B5F;
}
.more{max-width:20px;
}
img.more.less {
transform: rotate(180deg);
}<div id="startpoint"></div>
<div id="more">
<div class="row">
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/RIZEK.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Sabahoo.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Securite.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/SIP.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Spectar.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/stake.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Standard Chartered.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Step.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Switzgroup.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Tarjama.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/WTTC.jpg" alt="">
</div>
<div class="col-6 col-md-3 col-lg-2">
<img class="img-fluid" width="250" src="./images/clients/Z&V.jpg" alt="">
</div>
</div>
</div>
<button onclick="toggleText()" id="moreButton">
<p class="pink">Show More</p>
<img class="more" src="https://e7.pngegg.com/pngimages/325/32/png-clipart-arrow-down-android-down-arrow-hand-desktop-wallpaper-thumbnail.png" alt="">
</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421147.html
標籤：
上一篇：如何模糊或隱藏跑步者縮略圖？