檢測細節元素的打開或關閉

如何檢測Javascript細節元素何時打開或關閉？除了將監聽器附加到click函數並檢查open屬性是否設置。檢測細節元素的打開或關閉

2011-09-09 rolisz

難道喲你曾經找到解決辦法嗎？ – Bryce

-4

你可以做這樣的事情：

<details id="element"> 
    <p>Details</p> 
</details> 

<script> 
    var isOpen = ($("#element").attr("open") == "open"); 

    alert ("Open = " + isOpen); 
</script>

來源

2011-09-09 15:06:04

我正在尋找一個事件，當狀態從打開變爲關閉或反之亦然時發生。 – rolisz

有沒有理由不能使用onclick事件？您始終可以嘗試綁定DOMAttrModified事件。無論哪種情況，'details'元素都是如此新穎，並且不被許多瀏覽器所支持，所以很難說它將如何最終走上正軌。 –

那麼，如果我使用的是onclick事件，那麼我可能會使用兩個div而不是細節和摘要。這只是兩個額外的jQuery行，我不擔心跨瀏覽器的兼容性。我不知道DOMAttrModified，但我不認爲它在Chrome中工作，而細節元素在除Chrome之外的其他任何地方都無法工作:)） – rolisz

可以使用toggle event：

var details = document.querySelector("details") 
 

 
details.addEventListener("toggle", function() { 
 
details.firstChild.textContent = "done" 
 
})

<!doctype html> 
 
<details> 
 
<summary>toggle event</summary> 
 
</details>

來源

2016-03-22 18:38:21

很高興知道切換事件似乎並沒有冒泡（？），並且在事件觸發之前，'open'屬性似乎被修改*。 – commonpike

jQuery的

$("#detail-id").on("toggle", function() { 
    //code 
});

來源

2017-07-07 01:47:25 Sveen

檢測細節元素的打開或關閉

回答

相關問題