How do I close this menu by clicking on it?
I have this menu:
CSS
#message {
display: none;
position: absolute;
width: 120px;
background: #fff;
color: #000;
font-weight: bold;
}
When I click on it, #message opens. My problem is to close this thing.
JS:
$(function() {
$("#subm").click(function(evt) {
$("#message").css({
top: 55,
left: evt.pageX - 55
}).show();
});
});
I am trying to include this code inside the function above:
$('html').click(function(evt) {
if($('#message').is(":visible")) {
$('#message').hide();
}
});
but nothing happens, apparently the menu opens and closes at the same time. What's wrong? how can I close this menu by clicking an outer message box or even in a range class?
source to share
You can bind a click handler to document
to close it:
Example: 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()
requires the click to never reach document
, so immediately run it again.
source to share
Try changing your js to this:
$("#subm").click(function() {
$("#message").show();
});
$("#message").mouseleave(function(){
$("#message").hide();
});
When the user clicks the button, a menu will open. When the user mouse leaves the div, it will hide it. Is this what you are looking for?
If you really need a click to remove the visibility you can do:
$("body").on('click',function(){
$("#message").hide();
});
I just prefer to keep the mouse, tbh.
source to share
You can use the below code for hidden message
$(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();
}
});
});
#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>
source to share
You can just use .hide
to hide this element. Add an event listener for #message
and follow these steps:
$("#message").click(function(evt) {
$("#message").hide();
});
I'll give a working example: https://jsfiddle.net/jmpf1usu/8/
source to share
Try the following:
$(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>
source to share
To do this without stopPropagation()
shenanigans, you can add the following:
$(document).ready(function(){
$(document).click(function(event) {
if(event.target.id != "message"
&& event.target.id != "subm"
&& $('#message').is(':visible'))
{
$('#message').hide();
}
});
});
This is configured so that if the user clicks on anything that is not #message
and is not #subm
open span
, the div div will hide.
Expanded fiddle: https://jsfiddle.net/jmpf1usu/10/
Good luck :).
source to share