2

我正在尝试设置我自己的 tumblr 主题，我快到了，但这一直困扰着我很长一段时间。基本上我想对每篇文章进行讨论，但我想把它隐藏起来。因此，当有人点击让我们说“显示整个讨论”时，它就会出现。

我用简单的css隐藏了整个disqus讨论：

display: none;

jQuery：

$('.disqus').click(function() {
//shows discussion
$("#disqus_thread").animate({ height: 'show', opacity: 'show' }, 'slow');
//hides link
$(".disqus").animate({ height: 'hide', opacity: 'hide' }, 'slow'); 
});

当我在 disqus 插件加载之前单击它时它工作得很好。但是如果我在加载插件后点击它，它会拉伸到 700px 并保持这种状态。到目前为止，我无法找出原因。

4

1 回答 1

3

具有 display: none 的元素没有定义的宽度 - 因为它们不是页面布局的一部分。这可能会使 Disqus 感到困惑，因为它试图将自己插入页面。

显示的许多替代方案：无（元素不可见但仍存在于布局中）如下所示：

http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/

在我看来，更好的解决方案是在需要时加载 Disqus，而不是让它加载然后隐藏它。当用户单击“显示整个讨论”时，您可以使用 jQuery.getScript()，或者 - 不使用 jQuery - 使用 document.createElement('script') 将 Disqus 脚本标签添加到 DOM。

关于动态加载 Disqus 的博文在这里：

http://blog.yjl.im/2012/04/let-your-readers-decide-when-to-load.html

于 2012-11-26T14:04:49.863 回答