我正在创建一个聊天弹出按钮。我想用一个按钮打开和关闭弹出窗口/div。
<div class="menu-chat">
<a href="javascript:void(0);" class="float" id="menu-open">
<img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/chat.svg'; ?>">
</a>
<div id="menu-popup">
<ul>
<li><a href="mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d35383131321d3e322b382f2e732d36" rel="noreferrer noopener nofollow">[email protected]</a>" id="menu-email">
<img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/email.svg'; ?>">
</a></li>
<li><a href="tel:+923038518000" id="menu-call">
<img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/call.svg'; ?>">
</a></li>
<li><a href="https://m.me/Printed.Mobile.Covers" id="menu-facebook">
<img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/facebook.svg'; ?>">
</a></li>
<li><a href="https://wa.me/9203038518000" id="menu-whatsapp">
<img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/whatsapp.svg'; ?>">
</a></li>
</ul>
</div>
</div>
我希望单击按钮时出现弹出窗口。当再次单击该按钮时，我希望它消失。
最佳答案
最简单的方法是使用 JQuery toggle() 方法。当不带参数使用时，toggle() 方法只是切换元素的可见性:
$(function() {
$("#menu-open").on("click", function() {
$("#menu-popup").toggle();
});
});
关于javascript - 如何用单个按钮打开和关闭div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58286086/