0

Estou tentando exibir o conteúdo dos itens clicados, já fiz isto em diversos menus, mas nesse estou tendo problema pois não posso alterar as classes/divs já existentes pois como é uma plataforma nova que estou trabalhando esses itens já vem pré-definidos, facilitando algumas funções que eles tem de fazer. Já tentei de varias formas mas não consegui, alguém tem alguma ideia de como fazer?

$(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>

  <li class="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>

1 Resposta 1

3

Seria isso sua duvida? O elemento "children()" serve para pegar os filhos diretos em jquery, adicionei um "$('ul.level0').hide();" para esconder os que não forem filhos.

$('.level-top').on('click', function() {
  $('ul.level0').hide();
  $(this).children().show();
});
ul.level0 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>

  <li class="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>

3
  • Boa, 100%, estava tentando fazer parecido +1 16/10/2017 às 18:10
  • 1
    Vlw, espero ter ajudado, qualquer duvida é só perguntar. 16/10/2017 às 18:11
  • Muito boa, só esperando para poder votar como correta! Teria como adicionar também uma função que ao clicar no próprio item esconder o item também?
    – Snake
    16/10/2017 às 18:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .