Как закрыть это меню, нажав на кнопку?

У меня есть это меню:Как закрыть это меню, нажав на кнопку?

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

источник

2015-08-03 renata costa

Возможно, было бы полезно, если бы вы объяснили, какое желаемое поведение и с точки зрения того, как 'div' должно отображаться и скрываться. Я _assume_ есть причина, по которой вы не просто переключаете видимость с помощью ['.toggle'] (https://api.jquery.com/toggle/) ...? –

Можете ли вы объяснить левое движение, сделанное css ..., какие у вас цели с ним –

У меня есть эллипс span, который, когда вы нажмете на него, отобразит сообщение div, но я не могу закрыть этот div после его открытия. Мне просто нужно закрыть его, если я нахожусь за пределами этого div или даже в промежутке с его открытием. Я не знаю, как использовать переключатель. –

Вы можете привязать обработчик щелчка к 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, таким образом, сразу заставив его снова закрыть.

источник

2015-08-03 18:24:48 maxedison

Вы можете использовать следующий код для скрытия сообщения

$(function() { 
 
\t 
 

 
\t 
 
    $("#subm").click(function(evt) { 
 
     
 
    $("#message").css({ 
 
\t top: 55, 
 
     left: evt.pageX + 55 
 
    }).show(); 
 
    }); 
 
    $(document).click(function(event) { 
 
    if (!$(event.target).is("#subm")) { 
 
     $("#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>

источник

2015-08-03 18:25:35

Попробуйте изменить JS к этому:

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

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

Когда пользователь нажимает кнопку меню откроется , Когда пользовательская мышь покидает div, она скроет ее. Это то, что вы ищете?

Если вы действительно хотите нажать кнопку, чтобы удалить видимость вы можете сделать:

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

Я просто предпочитаю отпуск мыши, ТОЙ.

источник

2015-08-03 18:25:37

, пожалуйста, используйте нижеприведенный фрагмент кода.

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


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

JSFiddle

источник

2015-08-03 18:25:40

Вы можете просто использовать .hide, чтобы скрыть этот элемент.Добавить прослушиватель событий для #message и сделайте следующее:

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

Я поставил рабочий пример здесь: https://jsfiddle.net/jmpf1usu/8/

источник

2015-08-03 18:26:38

он хочет щелкнуть другой элемент не тот же элемент –

Спасибо, я могу обновить свой ответ. –

Попробуйте это:

$(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>

источник

2015-08-03 18:27:34

Чтобы сделать это без stopPropagation() shenanigans вы можете добавить:

$(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 будет скрывать.

Expanded вашей скрипки: https://jsfiddle.net/jmpf1usu/10/

Удачи :).

источник

2015-08-03 18:39:09

Как закрыть это меню, нажав на кнопку?

ответ

Смежные вопросы