Ashraf Hassanein
asked on
Jquey ui menu hiding
I have a set of 2 jquery buttons, one of them is logout and one will show a drop down menu, I have copied the example in the jquery ui page.
The code works pretty fine, so when I click on the settings button the menu is displayed, when I click on the the button or outside the menu is hiding when.
What I am missing is when I press on the same button (settings) the menu hides if it is displayed, can some one tell me how to do it please? below is my html code:
The code works pretty fine, so when I click on the settings button the menu is displayed, when I click on the the button or outside the menu is hiding when.
What I am missing is when I press on the same button (settings) the menu hides if it is displayed, can some one tell me how to do it please? below is my html code:
<?php
?>
<html>
<head>
<link rel="stylesheet" href="css/jquery.ui.all.css">
<link rel="stylesheet" href="css/ribbon.css">
<link rel="stylesheet" href="css/demos.css">
<style>
#toolbar {
padding: 4px;
background: #FFFFFF;
display: inline-block;
}
/* support: IE7 */
*+html #toolbar {
display: inline;
}
.ui-menu {
width: 150px;
background: #FFFFFF;
}
</style>
<meta charset="utf-8">
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(function() {
$( "#logout" ).button({
text: false,
icons: {
primary: "ui-icon-key"
}
});
$( "#settings" ).button({
text: false,
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
})
.click(function() {
var menu = $( this ).parent().next().show().position({
my: "left top",
at: "left bottom",
of: this
});
$( document ).on( "click", function() {
menu.hide();
});
return false;
})
.parent()
.buttonset()
.next()
.hide()
.menu();
$("menu").mouseout( function(){
$("menu").hide();
});
});
</script>
</head>
<body bgcolor="white">
<div id="header">
<div class="ribbon"><div class="ribbon-stitches-top"></div>
<strong class="ribbon-content">Welcome</strong>
<div class="ribbon-stitches-bottom"></div></div>
<div id="menu" style="text-align: right">
<div id="toolbar" class="ui-widget-header ui-corner-all">
<button id="logout">Logout</button>
<button id="settings">Settings</button>
</div>
<ul id="menu" >
<li><a href="#">Open...</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</div>
</body>
</html>
You should use jquery's .toggle() method. instead of doing a show() or hide() on the menu element change that so that the onClick handler uses toggle(). That way you can get rid of some code as well. Small example
.click: function() {
$('menu_element').toggle();
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Great very clear support
ASKER