我试图隐藏聊天小部件，并希望仅在单击按钮时弹出。但是，即使您将其置于 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>
它应该在页面加载时隐藏。并且仅在单击/触发按钮时显示。
最佳答案
例如，您需要更改 block 的可见性。这样它应该可以工作。您设置默认 none 值是正确的。
可见性是另一个属性，它的值可以是可见的或隐藏的。它不同于显示 block 或无，因为它仍然在 DOM 上呈现元素，使其占据其间距，它只是隐藏。
关于php - 如何隐藏 div 内容并仅在单击按钮时显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54721897/