Question

我有一个自定义的显示/隐藏切换脚本，我正在使用CSS3过渡效果。

该脚本在单击时显示内容，并在单击“HideLink”链接时隐藏它，完成CSS3转换 - 但仅限于Opera。

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

请参阅此JSfiddle：http://jsfiddle.net/xte63/

Answer 1

现在使用show / hide 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工作，而它没有。至少不完全是我在逻辑中犯了错误，将“data-visible”设置为false而不是true。

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

Javascript隐藏/显示切换在Opera中都是双向的，但在其他浏览器中只有一种方式

1 个答案: