javascript - 最初 Conceal facebook 插件

Question

我有一个简单的 .share-toggle 切换链接。当您点击它时，Facebook 评论插件应该会显示。它最初应该被 Conceal 问题是，如果我使用 css Conceal 它，然后单击切换按钮，FB 评论插件不会显示。所以我想到只有在加载了下面的代码后才 Conceal FB 插件......仍然没有运气。仅当我不 Conceal 插件时它才有效。

      var isLoaded = false;
  window.fbAsyncInit = function() {
    FB.init({
      channelUrl : '#', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
    $('#fb-root').trigger('facebook:init');

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));

    $("#fb-root").bind("facebook:init", function() {
        console.log('loaded');
        $('.social-sharing').hide();
    });

    $('.share-toggle').on('click', function() {
        $(this).parent().find('.social-sharing').slideToggle('fast');
    }); 

Answer 1

确保您 Conceal 了正确的容器。

如果您的 facebook 社交工具呈现为 .share-toggle 并且您已使用 css 将此元素设置为 display:none，facebook 代码可能会删除此 css加载后的属性。

所以你应该做的是将你的社交元素包装到一个容器中。

<div class="social-container" style="display:none">
    <div class="social-sharing"></div>
</div>

这样您就可以轻松切换容器以显示或 Conceal 您的社交小部件。

$('.share-toggle').on('click', function() {
    $('body').find('.social-container').slideToggle('fast');
});