He podido desarrollar un menú, funciona de esta manera al dar click en el enlace del menú, aparece, y al dar click en un espacio vació desaparece, hasta aquí, correctamente.
Pero tengo un pequeño inconveniente: Si vuelvo a dar click nuevamente en el mismo enlace, este no desaparece, entonces lo ideal sería que si doy click en el enlace del menú, aparezca. Esto funciona correctamente, pero si vuelvo dar nuevamente click en el mismo enlace, este no desaparece.
Quiero que desaparezca el menú al dar nuevamente click en el enlace de la misma manera como desaparece al dar click en un campo vacío. ¿Cómo puedo solucionar este pequeño inconveniente?
Éste es mi código:
$(document).ready(function(){
$('#menu li a').click(function(){
$('.dropdown-menu').hide();
var parent = $(this).parent().attr('id');
if ($('#'+parent+' .dropdown-menu').is (':hidden'))
$('#'+parent+' .dropdown-menu').show();
else
$('#'+parent+' .dropdown-menu').hide();
return false;
});
$('body,html').click(function(){
$('.dropdown-menu').hide();
});
});
#menu {
background-color: #2C2C2C;
background-image: -moz-linear-gradient(center top , #333333, #222222);
background-repeat: repeat-x;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
float:left;
width:940px;
}
#menu ul {
float:left;
width:100%;
padding:0px;
}
#menu ul li {
float:left;
position:relative;
list-style:none;
}
#menu ul li a {
color: #999999;
float: none;
line-height: 19px;
padding: 9px 10px 11px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
#menu ul li a:hover {
color: #ffffff;
}
#menu .dropdown-menu {
display: none;
left: 10px;
position: absolute;
top:35px;
width:140px;
background-color:#FFFFFF;
border-radius:5px;
border:1px solid #333333;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
#menu .dropdown-menu:after {
border-bottom: 6px solid #FFFFFF;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: "";
left: 10px;
position: absolute;
top: -6px;
}
.dropdown-menu li {
float:left;
width:100%;
list-style:none;
}
.dropdown-menu li a {
clear: both;
color: #333333;
display: block;
font-weight: normal;
line-height: 18px;
padding: 3px 15px;
white-space: nowrap;
}
.dropdown-menu li a:hover {
color: #ffffff;
background-color:#333333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li id="dropdown1"><a href="#">Dropdown 1</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown 11</a></li>
<li><a href="#">Dropdown 12</a></li>
</ul>
</li>
<li id="dropdown2"><a href="#">Dropdown 2</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown 21</a></li>
<li><a href="#">Dropdown 22</a></li>
<li><a href="#">Dropdown 32</a></li>
<li><a href="#">Dropdown 42</a></li>
<li><a href="#">Dropdown 52</a></li>
</ul>
</li>
<li id="dropdown3"><a href="#">Dropdown 3</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown 31</a></li>
<li><a href="#">Dropdown 32</a></li>
<li><a href="#">Dropdown 33</a></li>
</ul>
</li>
</ul>
</div>