时间戳

首页 > 解决方案 > 打开和关闭聊天气泡按钮的 div 弹出窗口

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

问题描述

我正在为网站和移动用户创建一个聊天气泡按钮。我创建了一个 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 按钮，并且还会出现关闭按钮。喜欢这些样本

当用户单击它时，会弹出关闭按钮

我想使用 jquery 或 JavaScript 来使其正常工作。有人请帮忙

标签： javascriptjqueryhtmlcss

解决方案

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

可以，然后呢。你有 4 个按钮。

打开聊天 关闭聊天 Facebook WhatsApp

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

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

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

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

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

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

快乐编码

编辑

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

推荐阅读