我有一个自定义的显示/隐藏切换脚本,我正在使用它以及用于效果的 CSS3 过渡。
该脚本在单击时显示内容,并在单击“HideLink”链接时隐藏它,完成 CSS3 transitions - 但仅在 Opera 中。
在其他浏览器中,该脚本仅用于显示内容,单击隐藏链接不起作用。
请参阅此 JSfiddle:http://jsfiddle.net/xte63/
最佳答案
这些天使用显示/隐藏 javascript,我更喜欢使用 HTML5 的 data-* 属性。
这已经可以通过 getAttribute 和 setAttribute 函数在非 HTML5 浏览器中使用。
我很快在 IE7、Chrome 和 Opera 上尝试了它,它似乎有效。
function showHide(shID) {
var exDiv = document.getElementById(shID);
if(exDiv.getAttribute("data-visible") != 'false'){
document.getElementById(shID+'-show').style.cssText = ';height:auto;opacity:1;visibility:visible;';
document.getElementById(shID).style.cssText = ';height:0;opacity:0;visibility:hidden;';
exDiv.setAttribute("data-visible" , 'false');
} else {
document.getElementById(shID+'-show').style.cssText = ';height:;opacity:0;visibility:hidden;';
document.getElementById(shID).style.cssText = ';height:auto;opacity:1;visibility: visible ;';
exDiv.setAttribute("data-visible" , 'true');
}
}
这使您无需检查 CSS 值即可确定 div 的状态。
编辑:正如评论中所指出的,隐藏链接上有一个拼写错误(onlick 而不是 onclick),这使得上面的 jsfiddle 看起来有效,但实际上没有。至少不完全是因为我在逻辑上犯了一个错误,将“数据可见”设置为 false 而不是 true。
这是一个更新的 jsfiddle:http://jsfiddle.net/ThJcb/4/ (上面的 JavaScript 片段也更新了)
关于Javascript 隐藏/显示切换在 Opera 中以两种方式工作,但在其他浏览器中只有一种方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11061031/