Dropdown menu superimposing

Asked

Viewed 208 times

1

I created a menu dropdown, submenu dropdown, The problem is that when I click one submenu and then another, the first one doesn’t close. What could be?

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>

jquery twitter-bootstrap dropdown

2 answers

2


Before showing the clicked submenu, hide the others before, except what you clicked. You do this by using .not().

It would also be interesting to close the submenus when you close the main menu, otherwise they will be open when you close the main menu and open it again. For this use the event hidden.bs.dropdown which is triggered when the menu is closed:

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

  • That way tbm worked, thank you very much!

  • 1

    The other way, if you notice, the submenu does not close when you open it and click on the link again.

  • True!!! Perfect!!

1

You can hide all other sub-menus when you call your function: 

$(document).ready(function () {
           $('.dropdown-submenu a.test').click(function (e) {
            $('.dropdown-submenu ul').hide();
               $(this).next('ul').toggle();
               e.stopPropagation();
               e.preventDefault();
               return false;
           });
       });

  • Perfect!!! worked perfectly. I’m still a layman in Js/Jquery. Thank you so much!

Browser other questions tagged jquery twitter-bootstrap dropdown

You are not signed in. Login or sign up in order to post.