為了使該功能將顯示更改為“隱藏”然后返回“阻止”，每次需要單擊 2 次。為什么是這樣？如何將其減少到只需一鍵點(diǎn)擊？function showOfferMessage() { var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); }}<div class="offer-row collapsible" id="'.$oid.'" onclick="showOfferMessage()"> <div class="offer-info-item"> <div class="offcatreview-title"> <h3>Cat. Rating</h3> </div> <div class="offer-cat-rating"> </div> </div></div><div class="content"> <p>'.$message.'</p></div>
3 回答
一只甜甜圈
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超5個(gè)贊
那是因?yàn)槟诿看吸c(diǎn)擊時(shí)都注冊(cè)了一個(gè)事件偵聽(tīng)器！因此，每次單擊時(shí)，偵聽(tīng)器都會(huì)再次執(zhí)行。
您的代碼已修復(fù)：
function showOfferMessage(element) {
element.classList.toggle("active");
var content = element.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
}
<div class="offer-row collapsible" id="'.$oid.'" onclick="showOfferMessage(this)">
<div class="offer-info-item">
<div class="offcatreview-title">
<h3>Cat. Rating</h3>
</div>
<div class="offer-cat-rating">
</div>
</div>
</div>
<div class="content" style="display: block">
<p>'.$message.'</p>
</div>
白衣非少年
TA貢獻(xiàn)1155條經(jīng)驗(yàn) 獲得超0個(gè)贊
該onclick事件執(zhí)行在元素showOfferMessage() {}上放置事件偵聽(tīng)器的函數(shù)"collapsible"。然后第二次單擊執(zhí)行事件監(jiān)聽(tīng)器的內(nèi)容。
但首先，只要你只有一個(gè)名為"collapsible"“為什么”的元素，就嘗試獲取多個(gè)元素。使用 css 樣式選擇器執(zhí)行document.querySelector并定位元素，然后addEventListener直接鏈接到該選擇器上。
當(dāng)您像這樣查詢樣式時(shí)，您會(huì)得到顯式設(shè)置的樣式。在您的情況下，如果沒(méi)有單擊該"collapsible"元素，則不會(huì)設(shè)置顯示樣式。即使 div 具有塊的默認(rèn)顯示樣式，但它尚未顯式設(shè)置，因此...style.display將返回空字符串 -> falsy。您必須使用該getComputedStyle方法獲得隱式樣式，
HUWWW
TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊
我遇到了類似的問(wèn)題，最終使用!==而不是===：
if (content.style.display !== "none") {
content.style.display = "none";
} else {
content.style.display = "block";
};
- 3 回答
- 0 關(guān)注
- 154 瀏覽
添加回答
舉報(bào)
0/150
提交
取消