如何禁用Chrome詳細信息標籤默認行爲

Question

在Chrome中

我想使用詳細信息標籤<details>details</details>。

但我不需要他的默認行爲。

我該如何禁用它？

http://jsfiddle.net/x8csg/

Answer 1

summary::-webkit-details-marker { 
    display: none; 
} 

http://jsfiddle.net/x8csg/1/

Answer 2

取決於你想做的事，我可以建議以下內容：

$('details').click(function(e){ e.preventDefault(); }); 

你必須阻止默認行爲。就像你想阻止按鈕提交表單...

請記住，在這種情況下，細節會被隱藏，所以你必須更改爲：

Answer 3

僅供參考，更完整的答案 - 這必須在兩個CSS和Javascript進行調整：

的Javascript：

var d=document.querySelectorAll('details:not(open)'), 
    i=d.length, 
    f=function(e){e.preventDefault();}; 

while(i-- > 0) { 

    // set the open attribute to the elements that doesn't have one 
    d[i].setAttribute('open',''); 

    // disable open/close behavior 
    d[i].onclick = f; 
} 
// cleanup 
delete(d); 
delete(i); 
delete(f); 

或者jQuery的風格：

$('details:not(open)').attr('open',true).click(function(e){ e.preventDefault(); }); 

CSS：

/* disable <summary> marker/arrow on webkit */ 
summary::-webkit-details-marker { display: none;} 

/* disable outline when clicked */ 
summary:focus{outline:none;}