Question

我有这个菜单：

CSS

#message { 
 display: none; 
 position: absolute; 
 width: 120px; 
 background: #fff; 
 color: #000; 
 font-weight: bold; 
}

当我点击它时，打开#message。我的问题是关闭这件事。

JS：

$(function() {

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

});

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

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

但没有任何事情发生，显然菜单同时打开和关闭。怎么了？如何关闭此菜单单击外部消息框甚至是跨类？

JSFiddle

Answer 1

您可以将点击处理程序绑定到document以关闭它：

示例：https://jsfiddle.net/jmpf1usu/4/

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

      evt.stopPropagation();
  });

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

evt.stopPropagation()是必需的，以便点击永远不会到达document，从而立即触发它再次关闭。

Answer 2

尝试将您的js更改为：

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

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

当用户点击按钮时，菜单将会打开。当用户鼠标离开div时，它将隐藏它。那是你在寻找什么？

如果您真的想要点击以删除可见度，则可以执行以下操作：

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

我只是喜欢鼠标离开，tbh。

Answer 3

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

＆＃13;

$(function() {
	

	
  $("#subm").click(function(evt) {
      
    $("#message").css({
	  top: 55,
      left: evt.pageX + 55
    }).show();
  });
    $(document).click(function(event) {
    if (!$(event.target).is("#subm")) {
        $("#message").hide();
    }
  });
  
});

＆＃13;

    #message { 
     display: none; 
     position: absolute; 
     width: 120px; 
     background: red; 
     color: #fff; 
     font-weight: bold; 
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="subm">open</span>

<div id="message">
message
</div>

＆＃13;

Answer 4

请尝试使用以下代码段。

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


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

JSFiddle

Answer 5

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

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

我在这里放了一个工作示例： https://jsfiddle.net/jmpf1usu/8/

Answer 6

试试这个：

$(function () {    
    $("#message").click(function (evt) {
        evt.stopPropagation();
    });
                     
    $("#subm").click(function (evt) {
        evt.stopPropagation();
        $("#message").css({
            top: 55,
            left: evt.pageX + 55
        }).toggle();
    });

    $('html').click(function (evt) {
        if ($('#message').is(":visible")) {
            $('#message').hide();
        }
    });
});

#message {
    display: none;
    position: absolute;
    width: 120px;
    background: red;
    color: #fff;
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="subm">open</span>
<div id="message">message</div>

Answer 7

如果没有stopPropagation()恶作剧，您可以添加以下内容：

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

            }        
    });
 });

这是设置的，以便用户点击不是#message而不是#subm打开span的任何内容时，消息div将隐藏。

扩大你的小提琴：https://jsfiddle.net/jmpf1usu/10/

祝你好运:)。

如何在外面点击此菜单？

7 个答案: