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

您必须阻止默认行为。就像你想阻止提交表格的按钮......

请注意，在这种情况下，细节将被隐藏，因此您必须更改为：

<details open>details</details>

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;}