我正在尝试隐藏聊天小部件,只想单击按钮时才弹出。但是,即使您将其放在DIV下并隐藏样式,似乎聊天窗口小部件也始终是持久的。

我尝试使用javascript,但仍然无法正常工作。

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Making this work.</title>
    </head>
    <style type="text/css">
    .toggle {display:none;}
    .show {display:block;}
    </style>
    <body>
      <a href="#" id="toggle">Trigger</a>
      <div class="toggle">
        <p> I'm here.
          <div class="inside_fb_con">
            <div class="fb-chat-wraper-qwerttefgsd" id="chat-fb"></div>
            <script> "use strict"; function chatWidget() { function getCookie(name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([.$?*|{}()[]\/+^])/g, '\$1') + "=([^;]*)"));return matches ? decodeURIComponent(matches[1]) : undefined; } var anonymousID = getCookie("anonymousID"); if (anonymousID) { var chatFb = document.getElementById('chat-fb'); var ref = ""; var traits = { anonymousID: anonymousID, payload: ref }; traits = JSON.stringify(traits);traits = btoa(traits); var newRef = 'base64_' + traits; var el = document.createElement('div'); el.className = 'fb-customerchat'; el.setAttribute('page_id', 461422510724453); el.setAttribute('ref', newRef); el.setAttribute('theme_color', '#0184ff'); el.setAttribute('logged_in_greeting', 'Hi, what vehicle would you love to get MaskProtected?'); el.setAttribute('logged_out_greeting', 'Login with your messenger to get started.'); el.setAttribute('greeting_dialog_display', ''); el.setAttribute('greeting_dialog_delay', ''); document.querySelector('.fb-chat-wraper-qwerttefgsd').appendChild(el); FB.XFBML.parse(); } else { var _chatFb = document.getElementById('chat-fb'); var _ref = ""; var el = document.createElement('div'); el.className = 'fb-customerchat'; el.setAttribute('page_id', 461422510724453); el.setAttribute('ref', _ref); el.setAttribute('theme_color', '#0184ff'); el.setAttribute('logged_in_greeting', 'Hi, what vehicle would you love to get MaskProtected?'); el.setAttribute('logged_out_greeting', 'Login with your messenger to get started.'); el.setAttribute('greeting_dialog_display', ''); el.setAttribute('greeting_dialog_delay', ''); document.querySelector('.fb-chat-wraper-qwerttefgsd').appendChild(el); FB.XFBML.parse(); } } window.fbMessengerPlugins = window.fbMessengerPlugins || { init: function () { FB.init({ appId : '345027132667121', autoLogAppEvents : true, xfbml : false, version : 'v3.0' }); chatWidget(); }, callable: [] }; window.fbAsyncInit = window.fbAsyncInit || function () { window.fbMessengerPlugins.callable.forEach(function (item) { item(); }); window.fbMessengerPlugins.init(); }; setTimeout(function () { (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }, 0); </script>
          </div>
        </p>
      </div>
      <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script type="text/javascript">
        $('#toggle').click(function() {
            $('.toggle').slideToggle('fast').addClass( "show" );
            return false;
        });
      </script>
    </body>
    </html>


页面加载时应将其隐藏。仅在单击/触发按钮时显示。

最佳答案

例如,您需要将可见更改为块。这样就可以了。设置默认的None值是正确的。

可见性是另一个属性,其值可以可见或隐藏。它与显示块不同,或没有显示块,因为它仍在DOM上呈现元素,使其占据其间距,仅被隐藏。

07-24 09:50
查看更多