我正在detail
一起使用新的 HTML5 元素和摘要。这是一个常见问题解答部分,所以有几个问题。它工作正常,但我需要一个额外的功能......如果用户打开第二个细节元素,第一个细节元素保持打开状态,这可能会令人不安。一旦打开另一个细节,我想关闭这个细节。
我也怀疑这是否对用户友好?
在这里,您有一张图片说明了我的意思并希望避免。
这里有一些代码,我的意思是:
我正在detail
一起使用新的 HTML5 元素和摘要。这是一个常见问题解答部分,所以有几个问题。它工作正常,但我需要一个额外的功能......如果用户打开第二个细节元素,第一个细节元素保持打开状态,这可能会令人不安。一旦打开另一个细节,我想关闭这个细节。
我也怀疑这是否对用户友好?
在这里,您有一张图片说明了我的意思并希望避免。
这里有一些代码,我的意思是:
您可以使用 jQuery 轻松实现这一点。
$('details').click(function(event) {
$('details').not(this).removeAttr("open");
});
这将关闭所有其他详细信息,但单击的那一项除外。
对于任何有兴趣的人,我找到了答案……我在这里找到了:
如果您添加onclick="closeAll(thisindex(this));"
到每个详细信息并添加此 javascript,它将在打开另一个详细信息时关闭打开的详细信息。希望能帮助到你!
function thisindex(elm){
var nodes = elm.parentNode.childNodes, node;
var i = 0, count = i;
while( (node=nodes.item(i++)) && node!=elm )
if( node.nodeType==1 ) count++;
return count;
}
function closeAll(index){
var len = document.getElementsByTagName("details").length;
for(var i=0; i<len; i++){
if(i != index){
document.getElementsByTagName("details")[i].removeAttribute("open");
}
}