I am creating a menu, that when I give it a button, a dropdown appears (That changes the initial width to a larger width), but when I do it, it appears and disappears, it does not stay.
How do I make it so that once the menu is clicked it is fully displayed?
Here my code:
$(document).ready(function() {
$("#menu").click(function(){
$("#elemIzq").removeClass('plegado').addClass("desplegado");
});
});
#elemIzq {
position: absolute;
float: left;
height: 100%;
margin: 0;
padding: 0;
display: inline-block;
background-color: rgb(84, 102, 131);
border-right: 3px solid #091d3e;
}
.plegado{
width: 54px;
}
.desplegado{
width: 300px;
}
#menu{
color: white;
font-size: 25px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav id="elemIzq" class="plegado">
<ul>
<li><a href=""><span id="menu" class="glyphicon glyphicon-menu-hamburger"></span></a></li>
</ul>
</nav>
EDITED:
Apparently if I apply the click
to the parent, to #elemIZq
, it works, but I want it to be done click
in the span
.
It is not that the state is returned, what it does is that the page is updated since
<a href="">
it has nothing in it and whenclick
thespan
event is triggered since it is a childclick
.<a>
the most common would be to add#
to the taga
and avoid reloading. besides this of adding and removing classes, it can be achieved with toggleClass