最初隐藏facebook插件

Question

我有一个简单的.share切换链接。当你点击它时，facebook评论插件应该会显示出来。它应该一开始就被隐藏，问题是如果我使用css隐藏它，并且我点击了切换，FB评论插件不会显示。所以我想只有在FB插件加载了下面的代码后才隐藏它。还是不走运。它只有在我不隐藏插件的情况下才起作用。

      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

确保您隐藏的是正确的容器。

如果你的facebook社交工具被渲染到.share-toggle，并且你已经用你的css将这个元素设置为display:none，那么facebook代码可能会在加载后删除这个css属性。

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

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

通过这种方式，您可以轻松地切换容器以显示或隐藏您的社交小部件。

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