如何隐藏div内容并仅在单击按钮时显示？

时间：2019-02-16 10:01:43

标签： php html css

我正试图隐藏聊天小部件，并且只想在单击按钮时弹出。但是，即使您将其放在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>

它应该在页面加载时隐藏。并且仅在单击/触发按钮时显示。

2 个答案:

答案 0 :(得分：0)

例如，您需要更改块的可见性。这样，它应该可以工作。设置默认的none值是正确的。

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

答案 1 :(得分：0)

 <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Making this work.</title>
</head>
<style type="text/css">
</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">

    $( document ).ready(function() {
        $('.toggle').hide();
    });
    $('#toggle').click(function() {
        $('.toggle').slideToggle('fast').addClass( "show" );
        return false;
    });

  </script>
</body>
</html>
相关问题
最新问题