Collapse mother close the child collapse too, however do not open together on bootstrap 4

Navigation
0

I have the following menu:

WhenIclickoncollapsemãe"Security":

Itopenedcollpasemãeandinsideithascollapsefilho"Users", we will click on collapse filho "Users":

Sofar,everythingisasIwouldlikeittobe,ifyouclickittoclose%%ofuserswillnormallyclose,untilthereis100%.

However,myproblemisifIclickonthe"%" of "Security", then it will close only% "Security" and collapse filho will remain open, as follows:

HowcanIdothiswhenIclickonthe"%" of "Security", also close the collapse mãe "Users"?

It's worth noting that when you click to OPEN the collapse mãe "Security", collapse filho "Users" can not open as well, it should be as follows:

Mymenucodes:

<divclass="sidenav">
    <div class="logo">
        <a href="home.php"><img src="img/store2.png"></a>
    </div>
    <ul class="menuVertical" id="accordion">
        <li>
            <a href="#" data-toggle="collapse" data-target="#submenu-1">
                <i class="fa fa-id-card"></i><span>Produtos<i class="fa fa-angle-down float-right"></i></span>
            </a>
        </li>
        <div class="submenu">
            <ul id="submenu-1" class="collapse" data-parent="#accordion">
                <li><a href=""><i class="fa fa-plus"></i><span> Novo</span></a></li>
                <li><a href=""><i class="far fa-edit"></i><span> Editar</span></a></li>
                <li><a href=""><i class="fa fa-search"></i><span> Pesquisar</span></a></li>
            </ul>
        </div>

        <!--************************************************************************************-->

        <li>
            <a href="#" data-toggle="collapse" data-target="#submenu-2">
                <i class="fa fa-wrench"></i><span>Parâmetros<i class="fa fa-angle-down float-right"></i></span>
            </a>
        </li>
        <div class="submenu">
            <ul id="submenu-2" class="collapse" data-parent="#accordion">
                <li><a href=""><i class="fa fa-search-minus"></i><span> Estoque Mínimo</span></a></li>
            </ul>
        </div>

        <!--************************************************************************************-->

        <li>
            <a href="">
                <i class="fa fa-list-ol"></i><span>Relatórios</span>
            </a>
        </li>

        <!--************************************************************************************-->

        <li>
            <a href="#" data-toggle="collapse" data-target="#submenu-3">
                <i class="fa fa-lock"></i><span>Segurança<i class="fa fa-angle-down float-right"></i></span>
            </a>
        </li>
        <div class="submenu">
            <ul id="submenu-3" class="collapse" data-parent="#accordion">
                <li><a href="#" data-toggle="collapse" data-target="#submenu-31"><i class="fa fa-user"></i><span> Usuários<i class="fa fa-angle-down float-right"></i></span></a></li>
            </ul>

            <div class="subsubmenu">
                <ul id="submenu-31" class="collapse">
                    <li><a href=""><i class="fa fa-plus"></i><span> Novo</span></a></li>
                    <li><a href=""><i class="far fa-edit"></i><span> Editar</span></a></li>
                    <li><a href=""><i class="fa fa-search"></i><span> Pesquisar</span></a></li>
                </ul>
            </div>
        </div>

        <!--************************************************************************************-->

        <li>
            <a href="" data-toggle="modal" data-target="#deslogar">
                <i class="fa fa-sign-out-alt"></i><span>Sair</span>
            </a>
        </li>

        <!--************************************************************************************-->

    </ul>
</div>
    
asked by anonymous 01.05.2018 / 21:48

2 answers

0

"I was able to do it like this: 

<li>
    <a href="#" data-toggle="collapse" data-target="#submenu-3">
        <i class="fa fa-lock"></i><span>Segurança<i class="fa fa-angle-down float-right"></i></span>
    </a>
</li>
<div class="submenu">
    <ul id="submenu-3" class="collapse" data-parent="#accordion">
        <li><a href="#" data-toggle="collapse" data-target="#submenu-31"><i class="fa fa-user"></i><span> Usuários<i class="fa fa-angle-down float-right"></i></span></a></li>
        <div class="subsubmenu">
            <ul id="submenu-31" class="collapse">
                <li><a href=""><i class="fa fa-plus"></i><span> Novo</span></a></li>
                <li><a href=""><i class="far fa-edit"></i><span> Editar</span></a></li>
                <li><a href=""><i class="fa fa-search"></i><span> Pesquisar</span></a></li>
            </ul>
        </div>
    </ul>           
</div>

I put the <div class="subsubmenu"> that contains the collapse filho "Users" inside the <div class="submenu"> and also inside the <ul id="submenu-3" class="collapse" data-parent="#accordion"> , so when you click to close the collapse mãe "Security", it will close it integer, % "Users" will not close, but will "disappear", since the% "%" of "Security" will be closed.

    
02.05.2018 / 03:11
0

Gabriel as you are using the default Bootstrap JS I think a CSS-only solution can serve you.

OBS: I needed to remove the <div class="submenu"> and <div class="subsubmenu"> so that the CSS rule can be used. But you can create the classes of these divs right in <ul> with the submenus 

li.collapsed + ul {
  height: 0 !important;
}
li.collapsed + ul + ul.collapsed.collapse.in {
  display: none;
}
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <div class="sidenav">
    <div class="logo">
        <a href="home.php"><img src="img/store2.png"></a>
    </div>
    <ul class="menuVertical" id="accordion">
        <li>
            <a href="#" data-toggle="collapse" data-target="#submenu-1">
                <i class="fa fa-id-card"></i><span>Produtos<i class="fa fa-angle-down float-right"></i></span>
            </a>
        </li>
        <div class="submenu">
            <ul id="submenu-1" class="collapse" data-parent="#accordion">
                <li><a href=""><i class="fa fa-plus"></i><span> Novo</span></a></li>
                <li><a href=""><i class="far fa-edit"></i><span> Editar</span></a></li>
                <li><a href=""><i class="fa fa-search"></i><span> Pesquisar</span></a></li>
            </ul>
        </div>

        <!--************************************************************************************-->

        <li>
            <a href="#" data-toggle="collapse" data-target="#submenu-2">
                <i class="fa fa-wrench"></i><span>Parâmetros<i class="fa fa-angle-down float-right"></i></span>
            </a>
        </li>
        <div class="submenu">
            <ul id="submenu-2" class="collapse" data-parent="#accordion">
                <li><a href=""><i class="fa fa-search-minus"></i><span> Estoque Mínimo</span></a></li>
            </ul>
        </div>

        <!--************************************************************************************-->

        <li>
            <a href="">
                <i class="fa fa-list-ol"></i><span>Relatórios</span>
            </a>
        </li>

        <!--************************************************************************************-->

        <li data-toggle="collapse" data-target="#submenu-3">
            <a href="#">
                <i class="fa fa-lock"></i><span>Segurança<i class="fa fa-angle-down float-right"></i></span>
            </a>
        </li>
        
            <ul id="submenu-3" class="collapse" data-toggle="collapse" data-target="#submenu-31" data-parent="#accordion">
                <li >
                  <a href="#" ><i class="fa fa-user"></i><span> Usuários<i class="fa fa-angle-down float-right"></i></span></a>
                </li>
            </ul>

            
                <ul id="submenu-31" class="collapse" data-toggle="collapse" data-parent="#accordion">
                    <li><a href=""><i class="fa fa-plus"></i><span> Novo</span></a></li>
                    <li><a href=""><i class="far fa-edit"></i><span> Editar</span></a></li>
                    <li><a href=""><i class="fa fa-search"></i><span> Pesquisar</span></a></li>
                </ul>
            
        

        <!--************************************************************************************-->

        <li>
            <a href="" data-toggle="modal" data-target="#deslogar">
                <i class="fa fa-sign-out-alt"></i><span>Sair</span>
            </a>
        </li>

        <!--************************************************************************************-->

    </ul>
</div>

I believe that by manipulating the original JS or by creating a new Script you can also, but there it can interfere with other components that use the Bootstrap collapse system.

    
01.05.2018 / 22:58
Select the ROW_NUMBER of an excel table CakePhp 3.6 issuing message deprecated (Accessing data as a property will be removed in 4.0.0.)