为什么 pinterest 提要不起作用？

Question

这是我的 pinterest 小部件代码：

<div id="pinterestFeed">
    <a data-pin-do="embedUser" href="https://www.pinterest.com/krish" 
         data-pin-scale-width="80" data-pin-scale-height="320" data-pin-board-width="400"> 
    </a>            
    <script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
</div>

在页面加载 pinterest 提要时 div 显示为 none。我有一个 click me 标签，当我点击 'click me' 时，应该会显示提要。但它对我不起作用。

当我删除 css 属性时显示 none 然后它工作正常。

This is m jsfiddle link

Answer 1

如果容器被隐藏，Pinterest 的脚本将不会初始化小部件。您可以 'almost hidden' 直到脚本以这种方式完成工作：

使用HTML：

<h3 id="displayFeed">Click me</h3>
<div id="pinterestFeed" class="almost_hidden">
    <a data-pin-do="embedUser" href="https://www.pinterest.com/krish" data-pin-scale-width="80" data-pin-scale-height="320" data-pin-board-width="400"></a>
</div>

CSS:

.almost_hidden {
    opacity: .01;
    height: 0;
    overflow: hidden;
}

比搞脚本：

$('#pinterestFeed').hide().removeClass('almost_hidden');
$('#displayFeed').click(function () {
    $('#pinterestFeed').show();
});

我无法在此处使用它，但您可以在 this Fiddle.

上查看

为什么 pinterest 提要不起作用？

Why pinterest feed not working?

jquery

pinterest