javascript - 打开和关闭聊天气泡按钮的 div 弹出窗口

Question

我正在为网站和移动用户创建聊天气泡按钮。我已经创建了一个 html 代码。

<div class="devsol-chat">

    <a href="javascript:void(0);" class="float" id="menu-open">
    <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/chat.svg'; ?>">
    </a> 

    <a href="javascript:void(0);" class="float" id="menu-close">
    <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/close.svg'; ?>">
    </a>            

    <ul>    
        <li><a href="https://m.me/kidsfitter" id="menu-facebook">
        <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/facebook.svg'; ?>">
        </a></li>
        <li><a href="https://wa.me/923038513000" id="menu-whatsapp">
        <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/whatsapp.svg'; ?>">
        </a></li>
    </ul>
</div>

我希望当用户单击聊天按钮时，它会弹出 whatsapp 和 facebook 按钮，并且还会出现关闭按钮。喜欢这些 sample

当用户单击它时会弹出带有关闭按钮的窗口

我想使用 jquery 或 JavaScript 使其发挥作用。有人请帮忙

Answer 1

我不会为您编写代码，因为您不会学习最重要的逻辑。我会解释的

好的。你有 4 个按钮。

打开聊天 关闭聊天 Facebook 微信

默认情况下，Facebook 和 WhatsApp 是隐藏的，即 display: none。

当您单击打开聊天 时，Facebook 和WhatsApp 需要可见，这是display: block

当您单击关闭聊天 按钮时，他们需要再次隐藏，即display: none

因此，通过分析这些信息，我们意识到我们需要使用 javascript 检测点击打开聊天 或关闭聊天，在我们检测到它之后，我们需要获取元素我们需要相应地显示或隐藏并设置它们的 css。

$('button').on('click', function() {
  //do something here
})

只需一个按钮即可使用该功能。看看this .它将帮助您使用 css。带上一些代码回来，这样我们就可以解决了:)

快乐编码

编辑

使用display: block 和display: none 的方法是最简单的。如果您想要动画和其他东西，还有其他方法可以做到这一点，但是在您这样做之后您就会明白这一点。相信我:)