因项目需要,要做一个聊天框,点击一个指定div,弹出表情弹框,点击除指定div和弹框本身的任意地方,关闭表情弹框。
点击除图片中表情按钮和弹框本身的任意地方,关闭表情弹框
<!-- 表情按钮-->
<li id="btn" type="2"></li>
<!-- 表情弹框-->
<div id="emoji_icon" hidden>
<!-- QQ表情 -->
<ul id="emoji_one">
</ul>
<!-- 表情 -->
<ul id="emoji_two" hidden>
</ul>
<!-- tab -->
<ul id="emoji_tab">
<li id="icon_one">qq表情</li>
<li id="icon_two">表情</li>
</ul>
</div>
隐藏表情
// 隐藏、显示表情弹框
$("#btn").click(function() {
$("#emoji_icon").toggle();
});
// 点击除按钮和弹框之外任意地方隐藏表情
$("body").click(function (e) {
if (!$(e.target).closest("#btn,#emoji_icon").length) {
$("#emoji_icon").hide();
}
});
vue
if (!(event.target).closest('.choose-type, .choose-type-box')) {
this.typeShow = false
}