我創建了兩 (2) 個部分。我想默認隱藏一個部分，它下面有一個按鈕，上面寫著“顯示更多”。
在“ Ulmar Tree Services Top Sights ”部分下類似這樣的 --- ( https://www.livermoretreeremoval.com/tree-service-ulmar ) 。
如果單擊該按鈕，隱藏的部分應出現，并且按鈕文本應更改為“顯示更少”。
如果再次單擊按鈕，可見部分應再次隱藏，按鈕文本應顯示“顯示更多”。
因此，當隱藏時，按鈕會顯示“顯示更多”，而當可見時，按鈕會顯示“顯示更少”。
下面是我的 JavaScript：
`
function toggleBlock() {
// get the block
var myBlock = document.getElementById(‘service-area-two’);
// get the current value of the block’s display property
var displaySetting = myBlock.style.display;
// also get the block button, so we can change what it says
var blockButton = document.getElementById(‘Show More’);
// now toggle the block and the button text, depending on current state
if (displaySetting == ‘block’) {
// block is visible. hide it
myBlock.style.display = ‘none’;
// change button text
blockButton.innerHTML = ‘Show Less’;
}
else {
// block is hidden. show it
myBlock.style.display = ‘block’;
// change button text
blockButton.innerHTML = ‘Show More’;
}
}
`
部分 ID：service-area-two 按鈕名稱是：ToggleButton
我知道我做錯了很多事情。
我怎樣才能讓這個按鈕作業？
uj5u.com熱心網友回復：
所以對于按鈕，show more 和 show less 不起作用是我的理解。我認為這里的錯誤是innerHTML. innerHTML表示塊內的實際 HTML，例如：
button.innerHTML = '<img src="---'">'
最后，更改innerHTML為innerText。
uj5u.com熱心網友回復：
使用隱藏屬性。
所以：
<div hidden id="service-area-two">
// content
</div>
<button id="Show More" onclick="toggleBlock()">Show more</button>
JavaScript 邏輯是這樣的：
function toggleBlock() {
var myBlock = document.getElementById("service-area-two");
var blockButton = document.getElementById("Show More");
if (myBlock.hidden) {
blockButton.innerHTML = "Show Less";
myBlock.hidden = false;
} else {
blockButton.innerHTML = "Show More";
myBlock.hidden = true;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/353982.html
標籤：javascript html css 功能