如何禁用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;}