javascript - vertical - Expandir el menú principal si se selecciona el menú secundario
menu vertical responsive css (1)
Tengo un menú con menús secundarios. El problema al que me enfrento es que cada vez que selecciono un menú secundario después de cargar la página, el menú colapsa. Quiero abrir el menú principal ampliado.
El código HTML es:
<div id=''cssmenu''>
<ul>
<li><a href=''http://internallink.com/home''><span>Home</span></a></li>
<li class=''active has-sub''><a href=''http://internallink.com/products''><span>Products</span></a>
<ul>
<li class=''has-sub''><a href=''http://internallink.com/product1''><span>Product 1</span></a>
<ul>
<li><a href=''http://internallink.com/subProduct''><span>Sub Product</span></a></li>
<li class=''last''><a href=''http://internallink.com/subProduct''><span>Sub Product</span></a></li>
</ul>
</li>
<li class=''has-sub''><a href=''http://internallink.com/product2''><span>Product 2</span></a>
<ul>
<li><a href=''http://internallink.com/subProduct''><span>Sub Product</span></a></li>
<li class=''last''><a href=''http://internallink.com/subProduct''><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href=''http://internallink.com/about''><span>About</span></a></li>
<li class=''last''><a href=''http://internallink.com/contact''><span>Contact</span></a></li>
</ul>
</div>
El JS es:
jQuery(document).ready(function () {
jQuery(''#cssmenu'').on("click","li.has-sub .holder",function () {
var element = jQuery(this).parent(''li'');
if (element.hasClass(''open'')) {
element.removeClass(''open'');
element.find(''li'').removeClass(''open'');
element.find(''ul'').slideUp();
}
else {
element.addClass(''open'');
element.children(''ul'').slideDown();
element.siblings(''li'').children(''ul'').slideUp();
element.siblings(''li'').removeClass(''open'');
element.siblings(''li'').find(''li'').removeClass(''open'');
element.siblings(''li'').find(''ul'').slideUp();
}
});
jQuery(''#cssmenu ul li.has-sub'').prepend(''<span class="holder"></span>'');
});
¿Cómo puedo expandir el menú principal si está seleccionado el menú secundario?
Fiddle : https://jsfiddle.net/x415mjfq/
Usted tiene las URL completas y absolutas en los enlaces; eso puede ser usado para su ventaja. Simplemente use document.querySelector con el selector de corchetes cuadrados y la propiedad location.href :
document.querySelector("a[href=''" + location.href + "'']").classList.add("selected");
Luego, haz lo que tengas que hacer. En este ejemplo, estoy agregando la clase selected .