javascript - Javascript 隐藏/显示切换在 Opera 中以两种方式工作，但在其他浏览器中只有一种方式

Question

我有一个自定义的显示/隐藏切换脚本，它与 CSS3 转换一起用于效果。

该脚本在单击时显示内容，并在单击“HideLink”链接时将其隐藏，并带有 CSS3 转换 - 但仅在 Opera 中。

在其他浏览器中，该脚本仅适用于显示内容，单击隐藏链接不起作用。

看到这个 JSfiddle：http: //jsfiddle.net/xte63/

Answer 1

这些天来显示/隐藏 javascript，我更喜欢使用 HTML5 的 data-* 属性。

这已经可以通过 getAttribute 和 setAttribute 函数在非 HTML5 浏览器中使用。

我很快就对 IE7、Chrome 和 Opera 进行了尝试，它似乎可以工作。

http://jsfiddle.net/ThJcb/

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

这允许您确定 div 的状态，而无需检查 CSS 值。

编辑：正如评论中指出的那样，隐藏链接（onlick 而不是 onclick）上有一个错字，这使它看起来上面的 jsfiddle 有效，而它没有。至少不完全是因为我在逻辑中犯了一个错误，将“数据可见”设置为 false 而不是 true。

这是一个更新的jsfiddle： http: //jsfiddle.net/ThJcb/4/ （上面的javascript片段也更新了）