Grégory L Grégory L - 1 month ago 14
CSS Question

Bootstrap Close Subdropdown on main dropdown closure

I'm currently working on a bootstrap menu on an ASP.NET application. To do that, I did a navbar by myself, and when I click on the button, it shows the menu like that:

enter image description here

That I wanted and worked well (All the code will be later). Then I want to create some submenus which appear when I click for example on the second choice: "Fiche". So after some research, I find that I can do it with bootstrap navbar like this:

enter image description here

That's almost what I wanted! (Excepted that it's ugly and that I don't know how to make it look better, but that's another problem.)
But then what I want is that when I click somewhere else than on my menu, all the menu disappear and that when I click again to open it, it doesn't show again the submenus I previously open (Basically, I want to close all).

And this part... doesn't work, firstly because it close If I click somewhere but it doesn't close the submenus, and I have no idea about how I can do this properly, I already tried to use .attr and try to remove manually bootstrap attributes, but it seems to don't be a good way of doing it. So I will post the actual code, which approximately work except for submenu closure (Also, I'm quite new to this community, I'm still testing how to do a proper post, so hope I have put enough information) On the snippet it doesn't seem to work, probably because of the lake of bootstrap which can lead to the differences in my configuration:



function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.immune-nav-close')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

.well
{
background-color: #219cdc !important;
}

.top-navbar
{
background-color: #00448a;
width: 100%;
height: 60px;
padding-top: 15px;
}

.menu-btn
{
margin-left: 2%;
height: 75%;
width: 40px;
max-width: 40px;
display: inline-block;
}

.span-menu
{
width: 100%;
height: 20%;
margin-bottom:10%;
background-color: white;
border-radius: 5px;
}

.dropdown-content
{
display: none;
position: absolute;
background-color: #219cdc;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
color: white;
border-radius: 5px;
top: 60px;
z-index: 1000 !important;
}

.dropdown-content a
{
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {color: black; background-color:white;}

.show {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="top-navbar">
<a class="menu-btn immune-nav-close" href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">
<div class="span-menu immune-nav-close"></div>
<div class="span-menu immune-nav-close"></div>
<div class="span-menu immune-nav-close"></div>
</a>
<div id="myDropdown" class="dropdown-content">
<a href="/Default.aspx">Accueil</a>
<a class="immune-nav-close" data-toggle="collapse" href="#collapseFiche" aria-expanded="false" aria-controls="collapseFiche">
Fiches
</a>
<div class="collapse ddown-nav" id="collapseFiche">
<div class="well">
<a href="/SaisieFiche.aspx">Saisir une fiche</a>
<a href="/MyFiches.aspx">Mes fiches</a>
</div>
</div>
<a href="/Approbation.aspx">Approbations</a>
<a href="/Validation.aspx">Validation RH</a>
<a class="immune-nav-close" data-toggle="collapse" href="#collapseExport" aria-expanded="false" aria-controls="collapseExport">
Exportations
</a>
<div class="collapse ddown-nav" id="collapseExport">
<div class="well">
<a href="/Synthese.aspx">Synthèse</a>
<a href="/Monthly.aspx">Bilan Mensuel</a>
<a href="/Personnal.aspx">Bilan Personnel</a>
</div>
</div>
<a class="immune-nav-close" data-toggle="collapse" href="#collapseSetting" aria-expanded="false" aria-controls="collapseSetting">
Configuration
</a>
<div class="collapse ddown-nav" id="collapseSetting">
<div class="well">
<a href="/Config_pays.aspx">Paramétrage Pays</a>
<a href="/Config_csp.aspx">Paramétrage Catégories Socio-Professionnelles</a>
</div>
</div>
</div>
</nav>





Fell free to ask if more information is needed! Thanks in advance for your help.

Answer

Actually the answer was quite "simple" but needed some things before.

Firstly I have some JS version problem that I corrected in hope it was that (because I couldn't use .collapse on the element I wanted) But then I understood that it must be applied on the <div> with the content of the collapse and so it work much better !

So I just had to replace my javascript by that:

window.onclick = function (event) {
    if (!event.target.matches('.immune-nav-close')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }

        $('.ddown-nav').collapse('hide')
    }
}