javascript - 如果用户单击聊天机器人外部,如何添加触发关闭聊天机器人?
问题描述
我的html代码是这样的:
<div class="chatbot chatbot--closed ">
<div class="chatbot__header">
<p><strong>Got a question?</strong> <span class="u-text-highlight">Ask Harry</span></p>
<svg class="chatbot__close-button icon-speech" viewBox="0 0 32 32">
<use xlink:href="#icon-speech" />
</svg>
<svg class="chatbot__close-button icon-close" viewBox="0 0 32 32">
<use xlink:href="#icon-close" data-toggle="modal" data-target="#basicModal" />
</svg>
</div>
<div class="chatbot__message-window">
<ul class="chatbot__messages">
<li class="is-ai animation">
<div class="is-ai__profile-picture">
<svg class="icon-avatar" viewBox="0 0 32 32">
<use xlink:href="#avatar" />
</svg>
</div>
<span class="chatbot__arrow chatbot__arrow--left"></span>
<p class='chatbot__message'><strong class='intro'>Hello, I’m Harry, your virtual assistant. I'm here to help with your general enquiries.</strong>Example of questions you can ask for demo purpose: <br><em>Hi / How are you? / I'd like some financial advice / Can you email me a statement? / Can I get a form? / How do I cancel my life insurance? </em></p>
</li>
<!-- Message here -->
</ul>
</div>
<div class="chatbot__entry chatbot--closed">
<input type="text" class="chatbot__input" placeholder="Write a message..." />
<svg class="chatbot__submit" viewBox="0 0 32 32">
<use xlink:href="#icon-send" />
</svg>
</div>
</div>
演示和完整代码如下:https ://codepen.io/trendingnews/pen/wvBorrR?editors=1010
当用户在聊天机器人上点击关闭时,它会出现一个反馈模式来填充使用聊天机器人的用户体验。如果用户单击聊天机器人上的关闭图标,它将关闭聊天机器人。当用户单击聊天机器人外部的元素时,我希望聊天机器人也可以关闭
我该怎么做?
解决方案
尝试这个:
$document.addEventListener("click", function(event) {
$target = $(event.target);
var element = document.getElementsByClassName("chatbot");
if(!$target.closest('.chatbot').length && !$target.closest('#chat-circle').length && (element[0].style.display == "block")) {
element[0].style.display = "none";
document.getElementById("chat-circle").style.display="block";
}
});
也许这不是最好的解决方案,但它对我有用。
推荐阅读
- git - 错误:RPC 失败;curl 92 HTTP/2 流 0 未完全关闭:PROTOCOL_ERROR (err 1)
- air - 原因:输入无效。ld:找不到 -lclang_rt.ios 的库
- swift - 编辑部分 UITextview
- spring - 如何指定具体的请求映射url
- python - 如何从 nGram 列表中加载计数向量器?
- ios - 如何仅在 webview 中播放视频而不是在 swift 中全屏播放
- python - 400 Error while reading data, error message: CSV table遇到太多错误,放弃。行数:29274;错误:1
- azure - 如何在构建定义工艺品中包含逻辑应用程序开发和 uat 参数 JSON 文件
- python - c++ 版本的 python 的 exec() 函数
- python - 根据不同年份的同一时期的值对时间序列的缺失值进行插值