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

我有一个定制的显示/隐藏切换脚本，我正在使用CSS3转换来实现效果

脚本在单击时显示内容，在单击“HideLink”链接时隐藏内容，并完成CSS3转换，但仅在Opera中完成

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

---

看到这个JSfiddle:

现在，通过显示/隐藏javascript，我更喜欢使用HTML5的data-*属性

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

我很快就在IE7、Chrome和Opera上试用过，它似乎很管用

这允许您确定div的状态，而不必检查CSS值

编辑：正如评论中所指出的，隐藏链接（onlick而不是onclick）上有一个输入错误，这使得上面的JSFIDLE看起来工作正常，而实际上没有。至少不完全像我在逻辑中犯的错误，将“数据可见”设置为false而不是true

下面是一个更新的JSFIDLE：

---

（上面的javascript代码片段也更新了）

OK，这很奇怪。当我在小提琴上工作时，它在隐藏的时候在铬上失败了。问题是，在我的HTML中使用该代码时失败。我的脚本和CSS在中。@Derek页面正在重新加载，而不是在我16岁的晚上触发隐藏功能。@OP我猜你在这么简单的事情上使用了太多的代码。如果我不使用CSSText来设置JS的样式并使用“.style.display”，那么它就可以工作了。但是我想在一行中添加更多CSS字符串，但不知道另一种方法。切换隐藏/显示的更简单的方法是使用HTML5：谢谢你的帮助。是否知道非HTML5浏览器的任何方法（可以使用CSS3设置样式）？当单击“隐藏内容”链接时，脚本存在重新加载页面的问题，请参阅此更新的JSFIDLE，并带有正文页边距（向下滚动到链接，单击它以了解我的意思）：更新：脚本正在重新加载页面，因为“隐藏内容”链接具有“onlick”而不是“onclick”功能，这使脚本看起来好像正在工作，但实际上它没有：（参见更新后的JSFIDLE：非常感谢。代码在JSFIDLE中运行得非常好。不幸的是，当我在HTML中测试它时，它没有加载。我认为这是因为在JSFIDLE中“Framework”设置为“No Wrap（head）”“-有没有建议将其调整为与OnLoad一起使用？如果不查看HTML，很难看出上面的内容不起作用的原因。可能是另一个Javascript错误，Javascript设置不正确，HTML标记不正确。我在中内联了JS和CSS。请在HTML测试页中查看此粘贴库中的标记（）要签入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'); 
    }
}