1

tenho o seguinte menu ele está na vertical o que eu quero fazer e quando clicar no link com a classe j_open a ul com a classe j_open_ul tenha um display block usando o efeito .toggle o problema e que quando clico em um ele abre a duas ul com a classe j_open_ul o que eu quero e que quando clicar em um ele abra a ul correspondente e fechar a outra aberta .

<script type="text/javascript">
                $('.j_open').on('click', function(e) {
                   e.preventDefault();
                   $(this).closest('ul').find('.j_open_ul').slideToggle('slow');
                });
</script>
<li class="dashboard_nav_menu_li">
    <a class= j_open">teste</a>
            <ul class="dashboard_nav_menu_sub j_open_ul">
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 1</a></li>
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 2</a></li>
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 3</a></li>
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 4</a></li>
            </ul>
</li>

<li class="dashboard_nav_menu_li">
    <a class= j_open">teste</a>
            <ul class="dashboard_nav_menu_sub j_open_ul">
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 5</a></li>
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 6</a></li>
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 7</a></li>
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 8</a></li>
            </ul>
</li>

1 Resposta 1

1

Você não conseguiu chegar ao resultado esperado, devido estar pegando o elemento errado no método closest() Ao invés de pegar a tag ul e fazer o find(), tem que pegar a tag li:

$('.j_open').on('click', function() {
  $(this).closest('li').find('.j_open_ul').slideToggle('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="dashboard_nav_menu_li">
  <a href="#" class="j_open ">teste</a>
  <ul class="dashboard_nav_menu_sub j_open_ul ">
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 1</a></li>
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 2</a></li>
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 3</a></li>
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 4</a></li>
  </ul>
</li>

<li class="dashboard_nav_menu_li ">
  <a href="#" class="j_open">teste</a>
  <ul class="dashboard_nav_menu_sub j_open_ul">
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 5</a></li>
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 6</a></li>
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 7</a></li>
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 8</a></li>
  </ul>
</li>

OBS: Também ajeite o seu HTML, pois a classe da tag a está faltando os " no início.

E acho que este e.preventDefault() não deveria existir ali.

Agora se quer fechar uma ao clicar na outra, ficando assim:

$('.j_open').closest('li').find('.j_open_ul').hide();

$('.j_open:eq(1)').on('click', function() {
  $(this).closest('li').find('.j_open_ul').slideDown('slow');
  $('.j_open').not(this).closest('li').find('.j_open_ul').slideUp('slow');
});

$('.j_open:eq(0)').on('click', function() {
  $(this).closest('li').find('.j_open_ul').slideDown('slow');
  $('.j_open').not(this).closest('li').find('.j_open_ul').slideUp('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="dashboard_nav_menu_li">
  <a href="#" class="j_open ">teste</a>
  <ul class="dashboard_nav_menu_sub j_open_ul ">
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 1</a></li>
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 2</a></li>
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 3</a></li>
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 4</a></li>
  </ul>
</li>

<li class="dashboard_nav_menu_li ">
  <a href="#" class="j_open">teste</a>
  <ul class="dashboard_nav_menu_sub j_open_ul">
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 5</a></li>
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 6</a></li>
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 7</a></li>
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 8</a></li>
  </ul>
</li>

2
  • obrigado pela resposta qual a melhor maneira de quando eu clicar no link 1 ele abrir e ao clicar no link 2 fechar o 1 e vice versa.
    – diogo Dsa
    24/03/2019 às 0:26
  • Fiz outro código clicando em um abrindo o outro!
    – LeAndrade
    24/03/2019 às 13:44

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 .