我在一家公司的常见问题解答部分使用 HTML5 标签详细信息。一个问题是,如果用户打开另一个问题,另一个问题不会自动关闭。因此我在网上搜索并找到了以下解决方案:
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");
}
}
}
这段代码在某种意义上确实可以正常工作,但它有一些小问题。有时它会同时打开两个问题并且很有趣。有没有一种方法可以正常工作?这应该适用于台式机、平板电脑和移动设备。
不期望的效果:
我创建了一个 fiddle http://jsfiddle.net/877tm/与所有的代码。 javascript 在那里工作,如果您想实时查看它,请单击 here .
最佳答案
既然你标记了 jQuery,你就可以这样做:
$('.info').on('click', 'details', function () {
$('details').removeAttr('open');
$(this).attr('open', '');
});
所有这一切都是在您单击任何detail
时删除所有detail
标记的open
属性,然后重新打开您刚刚打开的那个点击。
关于javascript - html5 详细信息标签一一打开 javascript 函数工作奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20023608/