显示/隐藏Disqus按钮在Firefox中无法正常使用

Question

我在网站上使用disqus，并添加了一个按钮来显示/隐藏评论。 该按钮在Chrome，Opera（和我想是IE）上可以正常使用，但在Firefox上无法使用。

失败是因为当我单击按钮时，我没有显示带注释的div。 div似乎没有大小。 如果更改窗口浏览器的大小…\\°/我会看到评论！ 为什么呢

<p id="commentsButton">
    <button id="buttonComment" onclick="toggleComments()">
        Commentaires</button>  
</p>
<script type="text/javascript">    
    function toggleComments(){
         if (document.getElementById("comments").style.display == "none"){           
            document.getElementById("comments").style.display="inline";
         } else {          
            document.getElementById("comments").style.display="none";
         }
     }  
</script>

好像有风格的争论

style="height: 0px !important

我能做什么 ？

Answer 1

当将Disqus加载到隐藏元素中时，Firefox（和某些版本的IE）具有古怪的行为。 您可以通过将Disqus嵌入代码包装在toggleComments()函数中来解决此问题，以便在该元素可见时加载。

但是，请确保将配置变量（例如disqus_shortname在函数之外。 总之，它看起来像这样：

<script type="text/javascript">    
var disqus_shortname='YOUR_SHORTNAME';

function toggleComments(){
    if (document.getElementById("comments").style.display == "none"){           
        document.getElementById("comments").style.display="inline";

        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        } 
        else {          
            document.getElementById("comments").style.display="none";
        }
    }
}   
</script>