Dropdown lists : auto close ?

[istrasoft]

Hi,

I wonder, for dropdown of the list variety, shouldn't a click/touch on a list element automatically close the dropdown ?

My 2 cents

[rafibomb]

This component was not built with single page apps in mind. I think it would be good to have. Have you worked out a hook to close the drop-down?

[rafibomb]

A solution was posted here: http://foundation.zurb.com/forum/posts/2032-dropdown-button-not-toggling

Though I'm sure if this is the best way.

[melroy89]

$(".nav-item").on( "click", function( event ) {        
    	if($('.navbar-toggler').is(':visible')) {    
            $(".navbar-toggler").trigger('click');
        }
});

[esfandyarp]

@Danger89's solution worked for me.

[Y3hu]

I am working on a website with React and Bootstrap and had the same problem.
Here is the solution that worked for me (add it inside useEffect on the navigation component):

//get all nav items elements
let navItems = document.querySelectorAll(".nav-link")
//iterate the nav items and add a listener to each of them
navItems.forEach(item => item.addEventListener("click", () => {
    //validate if toggler button is displayed
    if (document.getElementById("button-toggler").offsetParent !== null) {
        //trigger click event of the toggler button
        document.getElementById("button-toggler").click()
    }
}))

[DanielRuf]

and Bootstrap

Just as a side note, mixing frameworks is rarely a good idea (there can be many conflicts).

[Y3hu]

and Bootstrap

Just as a side note, mixing frameworks is rarely a good idea (there can be many conflicts).

Yep, I think the same but, I am not the one who makes desisions. xD