Question

我正在尝试设置我自己的tumblr主题，而我几乎就在那里，但这一直困扰着我很长一段时间。基本上我想对每篇文章进行disqus讨论，但我想隐藏它。因此，当有人点击时，会显示“显示整个讨论”。

我用简单的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那样拉伸并保持这种状态。到目前为止我找不到原因。

Answer 1

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

显示的许多替代方案：none（其中元素未见但在布局中仍然存在）如下所示：

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

在我看来，更好的解决方案是在需要时加载Disqus，而不是允许它加载然后隐藏它。当用户点击＆＃34;显示整个讨论＆＃34;您可以使用jQuery.getScript（），或者 - 不使用jQuery - 使用document.createElement（＆＃39; script＆＃39;）将Disqus脚本标记添加到DOM。

动态加载Disqus的博客文章在这里：

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

在隐藏元素中初始化disqus注释在出现后被拉伸

1 个答案: