Buenas,
he realizado un menú dropdown, desplegable, pero me surge un problema, y es que al pinchar sobre uno de los enlaces que se despliegan no se cierra ese mismo menú desplegable, es decir, son unos enlaces ancla con scroll y al pinchar sobre uno lleva a la sección correspondiente pero me gustaría que desapareciera el menú. No logro dar con la solución para ello, agradecería si alguien tiene alguna idea. Mi código es:
html:
<nav class="animenu" role="navigation">
<button class="animenu__toggle">
<img src="img/iconos/lines-menu.png" />
</button>
<ul class="animenu__nav">
<li>
<a href="#" class="ancla">home</a>
</li>
<li>
<a href="#aboutUs" class="ancla">about</a>
</li>
<li>
<a href="#contactUs" class="ancla">contact</a>
</li>
</ul>
</nav>
script
<script type="text/javascript">
(function(){
var animenuToggle = document.querySelector('.animenu__toggle'),
animenuNav = document.querySelector('.animenu__nav'),
hasClass = function( elem, className ) {
return new RegExp( ' ' + className + ' ' ).test( ' ' + elem.className + ' ' );
},
toggleClass = function( elem, className ) {
var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
if( hasClass(elem, className ) ) {
while( newClass.indexOf( ' ' + className + ' ' ) >= 0 ) {
newClass = newClass.replace( ' ' + className + ' ' , ' ' );
}
elem.className = newClass.replace( /^\s+|\s+$/g, '' );
} else {
elem.className += ' ' + className;
}
},
animenuToggleNav = function (){
toggleClass(animenuToggle, "animenu__toggle--active");
toggleClass(animenuNav, "animenu__nav--open");
}
if (!animenuToggle.addEventListener) {
animenuToggle.attachEvent("onclick", animenuToggleNav);
}
else {
animenuToggle.addEventListener('click', animenuToggleNav);
}
})()
</script>
Un saludo!!!!