I'm trying to display the contents of the items clicked, I've done this on several menus, but in this I'm having a problem because I can not change the existing classes / divs since as a new platform I'm working these items are already predefined , facilitating some functions that they have to do. I've tried in several ways but I could not, does anyone have any idea how to do it?
$(document).on('click', '.level-top', function() {
let posicao = $(this).index(".level-top");
if ($('.nav-item.level0.nav-' + (posicao) + ' ul').is(':visible')) {
$('.nav-item.level0.nav-' + (posicao) + ' ul').hide();
} else {
$('.level0.nav-submenu.nav-panel--dropdown.nav-panel').hide();
$('.nav-item.level0.nav-' + (posicao) + ' ul').show();
}
});ul.level0 {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><liclass="nav-item level0 nav-1 level-top first nav-item--parent classic nav-item--only-subcategories parent">
<a class="level-top">
<span>Datas Especiais</span>
</a>
<ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="">
<li class="nav-item level1 nav-1-1 first last classic">
<a href="/datas-especiais/18-10-dia-do-medico.html"><span>18/10 Dia do médico</span></a>
</li>
</ul>
</li>
<li class="nav-item level0 nav-2 level-top nav-item--parent classic nav-item--only-subcategories parent">
<a class="level-top">
<span>Ocasiões</span>
</a>
<ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
<li class="nav-item level1 nav-2-1 first classic">
<a href="/ocasioes/parabens.html"><span>Parabéns</span></a>
</li>
</ul>
</li>
<li class="nav-item level0 nav-3 level-top nav-item--parent classic nav-item--only-subcategories parent">
<a class="level-top">
<span>Categorias</span>
</a>
<ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
<li class="nav-item level1 nav-3-1 first last classic">
<a href="/categorias/bebidas.html"><span>bebidas</span></a>
</li>
</ul>
</li>
<li class="nav-item level0 nav-4 level-top nav-item--parent classic nav-item--only-subcategories parent">
<a class="level-top">
<span>Flores</span>
</a>
<ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
<li class="nav-item level1 nav-4-1 first last classic">
<a href="/flores/buques.html"><span>Buquês de Flores</span></a>
</li>
</ul>
</li>
<li class="nav-item level0 nav-5 level-top nav-item--parent classic nav-item--only-subcategories parent">
<a class="level-top">
<span>Especiais</span>
</a>
<ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
<li class="nav-item level1 nav-5-1 first last classic">
<a href="/especiais/hoegaarden.html"><span>Hoegaarden</span></a>
</li>
</ul>
</li>
<li class="nav-item level0 nav-6 level-top nav-item--parent classic nav-item--only-subcategories parent">
<a class="level-top">
<span>Faixas de Preço</span>
</a>
<ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
<li class="nav-item level1 nav-6-1 first last classic">
<a href="/faixas-de-preco/ate-r-100.html"><span>Até R$100</span></a>
</li>
</ul>
</li>
</ul>