1

Criei um menu dropdown, com submenu dropdown, o problema é que quando eu clico em um submenu e depois em outro, o primeiro não fecha. O que poderia ser?

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

<script>
        $(document).ready(function () {
            $('.dropdown-submenu a.test').click(function (e) {
                $(this).next('ul').toggle();
                e.stopPropagation();
                e.preventDefault();
                return false;
            });
        });
    </script>
.dropdown-submenu {
            position: relative;
        }
        .dropdown-menu {
        top:13px !important;
        }
        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -1px;
        }

        .dropdown-menu .show {
        top:13px !important;
        }
        .dropdown-menu > li > a {
            padding: 3px 7px;
        }
        .dropdown-menu > li > a:hover {
            background-color: #ff6a00;
        }
<ul>
                                    <li class="smc_li" style="width:86px; margin-left:-4px">
                                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <div class="smc_li_div">
                                                <img src="~/Template/Icons/ICONES_USADOS_PRINCIPAL/Cadastro32x32.png" class="img-fluid" />
                                            </div>
                                            <p class="text-center">Cadastros</p>
                                        </a>
                                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <li><a tabindex="-1" href="#">Clientes</a></li>
                                            <li class="dropdown-submenu">
                                                <a class="test" href="#">Produtos <span class="caret caret-right"></span></a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Familia</a></li>
                                                    <li><a href="#">Grupo</a></li>
                                                    <li><a href="#">Sub-Grupo</a></li>
                                                    <li><a href="#">Unidade</a></li>
                                                    <li><a href="#">Marca</a></li>
                                                    <li><a href="#">Nome Científico</a></li>
                                                    <li><a href="#">Produtos Vinculados</a></li>
                                                    <li><a href="#">Produtos Similares</a></li>
                                                    <li><a href="#">Promoções</a></li>
                                                    <li><a href="#">Reajuste Preço</a></li>
                                                    <li><a href="#">Confecção Etiqueta</a></li>
                                                    <li><a href="#">CFOP</a></li>
                                                    <li><a href="#">Natureza Operação</a></li>
                                                </ul>
                                            </li>
                                            <li><a tabindex="-1" href="#">Colaboradores</a></li>
                                            <li><a tabindex="-1" href="#">Contadores</a></li>
                                            <li><a tabindex="-1" href="#">Fornecedores</a></li>
                                            <li><a tabindex="-1" href="#">Parceito Comerciais</a></li>
                                            <li><a tabindex="-1" href="#">Serviços</a></li>
                                            <li class="dropdown-submenu">
                                                <a class="test" href="#">Endereço <span class="caret caret-right"></span></a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Bairros</a></li>
                                                    <li><a href="#">Zonas</a></li>
                                                    <li><a href="#">Regiões</a></li>
                                                </ul>
                                            </li>
                                            <li class="dropdown-submenu">
                                                <a class="test" href="#">Transportes <span class="caret caret-right"></span></a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Motoristas</a></li>
                                                    <li><a href="#">Transportadora</a></li>
                                                    <li><a href="#">Veículos</a></li>
                                                    <li><a href="#">Reboques</a></li>
                                                    <li><a href="#">Pedágios</a></li>
                                                    <li><a href="#">Rotas</a></li>
                                                </ul>
                                            </li>
                                            <li class="dropdown-submenu">
                                                <a class="test" href="#">Veículos Próprios <span class="caret caret-right"></span></a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Cadastros</a></li>
                                                    <li><a href="#">Controle De Uso</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>

0

2 Respostas 2

2

Antes de mostrar o submenu clicado, esconda os outros antes, exceto o que você clicou. Você faz isso usando .not().

Também seria interessante fechar os submenus quando você fechar o menu principal, senão eles estarão abertos quando você fechar o menu principal e abri-lo novamente. Para isso use o evento hidden.bs.dropdown que é disparado quando o menu é fechado:

$(document).ready(function () {
   
   $('.smc_li').on('hidden.bs.dropdown', function () {
     $("ul.dropdown-menu:first", this)
     .find(".dropdown-menu")
     .hide();
   });
   
   $('.dropdown-submenu a.test').click(function (e) {
       $(this)
       .closest(".smc_li > ul")
       .find(".dropdown-menu")
       .not($(this).next("ul"))
       .hide();
       
       $(this)
       .next('ul')
       .toggle();
       e.stopPropagation();
       e.preventDefault();
       return false;
   });
});
.dropdown-submenu {
            position: relative;
}
.dropdown-menu {
top:13px !important;
}
.dropdown-submenu .dropdown-menu {
   top: 0;
   left: 100%;
   margin-top: -1px;
}

.dropdown-menu .show {
top:13px !important;
}
.dropdown-menu > li > a {
   padding: 3px 7px;
}
.dropdown-menu > li > a:hover {
   background-color: #ff6a00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<ul>
   <li class="smc_li" style="width:86px; margin-left:-4px">
       <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <div class="smc_li_div">
               <img src="~/Template/Icons/ICONES_USADOS_PRINCIPAL/Cadastro32x32.png" class="img-fluid" />
           </div>
           <p class="text-center">Cadastros</p>
       </a>
       <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
           <li><a tabindex="-1" href="#">Clientes</a></li>
           <li class="dropdown-submenu">
               <a class="test" href="#">Produtos <span class="caret caret-right"></span></a>
               <ul class="dropdown-menu">
                   <li><a href="#">Familia</a></li>
                   <li><a href="#">Grupo</a></li>
                   <li><a href="#">Sub-Grupo</a></li>
                   <li><a href="#">Unidade</a></li>
                   <li><a href="#">Marca</a></li>
                   <li><a href="#">Nome Científico</a></li>
                   <li><a href="#">Produtos Vinculados</a></li>
                   <li><a href="#">Produtos Similares</a></li>
                   <li><a href="#">Promoções</a></li>
                   <li><a href="#">Reajuste Preço</a></li>
                   <li><a href="#">Confecção Etiqueta</a></li>
                   <li><a href="#">CFOP</a></li>
                   <li><a href="#">Natureza Operação</a></li>
               </ul>
           </li>
           <li><a tabindex="-1" href="#">Colaboradores</a></li>
           <li><a tabindex="-1" href="#">Contadores</a></li>
           <li><a tabindex="-1" href="#">Fornecedores</a></li>
           <li><a tabindex="-1" href="#">Parceito Comerciais</a></li>
           <li><a tabindex="-1" href="#">Serviços</a></li>
           <li class="dropdown-submenu">
               <a class="test" href="#">Endereço <span class="caret caret-right"></span></a>
               <ul class="dropdown-menu">
                   <li><a href="#">Bairros</a></li>
                   <li><a href="#">Zonas</a></li>
                   <li><a href="#">Regiões</a></li>
               </ul>
           </li>
           <li class="dropdown-submenu">
               <a class="test" href="#">Transportes <span class="caret caret-right"></span></a>
               <ul class="dropdown-menu">
                   <li><a href="#">Motoristas</a></li>
                   <li><a href="#">Transportadora</a></li>
                   <li><a href="#">Veículos</a></li>
                   <li><a href="#">Reboques</a></li>
                   <li><a href="#">Pedágios</a></li>
                   <li><a href="#">Rotas</a></li>
               </ul>
           </li>
           <li class="dropdown-submenu">
               <a class="test" href="#">Veículos Próprios <span class="caret caret-right"></span></a>
               <ul class="dropdown-menu">
                   <li><a href="#">Cadastros</a></li>
                   <li><a href="#">Controle De Uso</a></li>
               </ul>
           </li>
       </ul>
   </li>
</ul>

3
  • Esse jeito tbm funcionou, muito obrigado! Commented 14/06/2019 às 16:06
  • 1
    Do jeito da outra resposta, se vc notar, o submenu não fecha quando vc abre ele e clica no link de novo.
    – Sam
    Commented 14/06/2019 às 16:08
  • Verdade!!! Perfeito!! Commented 14/06/2019 às 16:37
1

Você pode ocultar todos os outros sub-menus quando você chamar sua função:

$(document).ready(function () {
           $('.dropdown-submenu a.test').click(function (e) {
            $('.dropdown-submenu ul').hide();
               $(this).next('ul').toggle();
               e.stopPropagation();
               e.preventDefault();
               return false;
           });
       });
1
  • Perfeito!!! funcionou perfeitamente. eu ainda sou leigo em Js/Jquery. Muito obrigado! Commented 14/06/2019 às 16:05

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 .