堆栈内存溢出
  简体   繁体   English

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

[英]How to hide a div content and only show when a button is click?

 原文  2019-02-16 10:01:42  1   2    php/ html/ css

问题描述

I'm trying to hide chat widget and wanted to only popup when a button is click. 我正在尝试隐藏聊天小部件，只想单击按钮时才弹出。 But it seems the chat widget is always persistent even if you put this under a DIV and put style to hide. 但是，即使您将其放在DIV下并隐藏样式，似乎聊天窗口小部件也始终是持久的。

I tried javascript but still still not working. 我尝试使用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>

It should be hidden on page load. 页面加载时应将其隐藏。 And only show when button is clicked/triggered. 并且仅在单击/触发按钮时显示。

2 个解决方案

解决方案1
 0  2019-02-16 10:57:58

You need to change visible for block, for example. 例如，您需要将可见更改为块。 This way it should work. 这样，它应该可以工作。 You are correct on setting the default none value. 设置默认的None值是正确的。

Visibility is another property which values can be visible or hidden. 可见性是另一个属性，其值可以可见或隐藏。 It differs from the display block or none because it still renders the element on the DOM, making it occupy its spacing, it is only hidden. 它与显示块不同或没有，因为它仍在DOM上呈现元素，使其占据其间距，仅被隐藏。

解决方案2
 0  2019-02-18 08:20:06

 <!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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery在单击关闭按钮时仅会隐藏该特定的div吗？ - jQuery when click on the close button it will only hide that particular div only? 单击同一按钮显示Div 2和Hide Div 1 - Show Div 2 and Hide Div 1 on click on the same button 单击按钮显示内容，然后隐藏该按钮 - Show content on button click then hide that button 如何根据按钮的值显示/隐藏Div on click事件 - how to show/hide Div on click event based on the value of button 单击另一个 DIV 时隐藏/显示 div - Hide/Show div when click another DIV 如何显示/隐藏输入类型：单击按钮时的文本 - how to show/hide input type:text when button is click 隐藏并显示div单击 - hide and show div click on a 单击提交按钮时如何仅加载内容区域？ - How to load only the content area when click submit button? 即使在php中选择选项，也可以在按钮单击上显示和隐藏div - show and hide div on button click even if select options in php 按下按钮时显示隐藏的div内容 - show hidden div content when button is pressed
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM