I came across a helpful page (How to add a custom right-click menu to a webpage?) discussing "How to add a custom right-click menu to a webpage"
The source does not provide any functionality to hide the menu.
Any suggestions on how I can hide the menu?
$(function() {
var $contextMenu = $("#contextMenu");
$("body").on("contextmenu", "table tr", function(e) {
$contextMenu.css({
display: "block",
left: e.pageX,
top: e.pageY
});
return false;
});
$contextMenu.on("click", "a", function() {
$contextMenu.hide();
});
});#contextMenu {
position: absolute;
display: none;
}<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table id="mt" class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div id="contextMenu" class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
<li><a tabindex="-1" href="#">Action</a>
</li>
<li><a tabindex="-1" href="#">Another action</a>
</li>
<li><a tabindex="-1" href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</div>
</body>
</html>Thank you!