Javascript 如何关闭此菜单单击外部？

我有这个菜单：

CSS

当我点击时，会打开#消息。 我的问题是关上这东西

JS:

我尝试将此代码放在上面的函数中：

  $('html').click(function(evt) {
    if($('#message').is(":visible")) {
        $('#message').hide();
    }
  });

但什么也没发生，显然菜单是同时打开和关闭的。 怎么了？如何在消息框外甚至在span类中单击关闭此菜单

---

您可以将单击处理程序绑定到

文档

以关闭它：

例如：

---

evt.stopPropagation（）

是必需的，这样单击就永远不会到达

文档

，从而立即触发它再次关闭。

您可以使用下面的代码隐藏消息

$（函数（）{
$（“#subm”）。单击（函数（evt）{
$（“#消息”）.css({
排名：55，
左：evt.pageX+55
}).show（）；
});
$（文档）。单击（函数（事件）{
if（！$（event.target）.is（“#subm”））{
$（“#消息”）.hide（）；
}
});
});
#消息{
显示：无；
位置：绝对位置；
宽度：120px；
背景：红色；
颜色：#fff；
字体大小：粗体；
}

打开
消息
尝试将您的js更改为：

$("#subm").click(function() {
  $("#message").show();
 });

$("#message").mouseleave(function(){
   $("#message").hide(); 
});

当用户点击按钮时，菜单将打开。当用户鼠标离开div时，它将隐藏它。这就是你要找的吗

如果确实需要单击以删除可见性，可以执行以下操作：

$("body").on('click',function(){
   $("#message").hide(); 
});

我只是喜欢鼠标离开，tbh。
请尝试下面的代码片段

$(function() { 
  $("#subm").click(function(evt) {
       evt.stopPropagation();
    $("#message").css({
      top: 55,
      left: evt.pageX + 55
    }).show();
  });


    $('html').click(function() {
        $("#message").hide();
    });
});

您可以简单地使用
.hide
隐藏该元素。为
#message
添加事件侦听器，并执行以下操作：

  $("#message").click(function(evt) {
     $("#message").hide();
  });

$(document).ready(function(){
    $(document).click(function(event) {         
        if(event.target.id != "message" 
            && event.target.id != "subm" 
            && $('#message').is(':visible')) 
            {            
                    $('#message').hide();

            }        
    });
 });

我在这里举了一个工作示例：
试试这个：


$（函数（）{
$（“#消息”）。单击（函数（evt）{
evt.stopPropagation（）；
});
$（“#subm”）。单击（函数（evt）{
evt.stopPropagation（）；
$（“#消息”）.css({
排名：55，
左：evt.pageX+55
}).toggle（）；
});
$（'html'）。单击（函数（evt）{
如果（$（“#消息”）是（“：可见”））{
$（“#消息”）.hide（）；
}
});
});
#消息{
显示：无；
位置：绝对位置；
宽度：120px；
背景：红色；
颜色：#fff；
字体大小：粗体；
}

打开
消息
若要在不使用停止播放（）的情况下进行播放，可以添加以下内容：

  $("#message").click(function(evt) {
     $("#message").hide();
  });

$(document).ready(function(){
    $(document).click(function(event) {         
        if(event.target.id != "message" 
            && event.target.id != "subm" 
            && $('#message').is(':visible')) 
            {            
                    $('#message').hide();

            }        
    });
 });

设置此选项的目的是，如果用户单击的内容不是
#message
，也不是
#subm
open
span
，则消息div将隐藏

扩展你的小提琴：

祝你好运：）。
如果你能从如何显示和隐藏
div
这两个方面解释一下你想要的行为，可能会有所帮助。我想这就是为什么你不简单地用…切换可见性的原因？你能解释一下css做的左移吗…，你的目标是什么吗？我有一个span元素，当你点击它时，它会显示消息div，但我不能在它打开后关闭这个div。我只需要关闭它，如果我在那个div之外或者甚至在span中单击，然后打开它。我不知道如何使用切换。只需在span中单击时打开菜单即可。就像stackoverflow一样，当你点击顶部菜单中的字母图标时，你现在得到了数百万个答案。她想点击其他元素而不是相同的元素
$(document).ready(function(){
    $(document).click(function(event) {         
        if(event.target.id != "message" 
            && event.target.id != "subm" 
            && $('#message').is(':visible')) 
            {            
                    $('#message').hide();

            }        
    });
 });