Materialize: SideNav with dropdown not Closing On Click

[pedromvieira]

Hi, My SideNav only closes when I click direct links, but not within dropdown links.
My code:

<div class="navbar-fixed">
    <nav class="teal lighten-2" role="navigation">
        <div class="container">
            <div class="nav-wrapper">
                <div>
                    <ul id="solution1" class="dropdown-content">
                        <li><a href="#" class="">Home</a></li>
                        <li><a href="#card" class="">Benefits</a></li>
                        <li><a href="#platform" class="">Plataform</a></li>
                        <li><a href="#security" class="">Security</a></li>
                        <li><a href="#report" class="">Report</a></li>
                    </ul>
                    <ul id="language1" class="dropdown-content">
                        <li><a href="index_en-us.html" class="">English </a></li>
                        <li><a href="index_pt-br.html" class="">Português </a></li>
                        <li><a href="index_es-es.html" class="">Español </a></li>
                    </ul>
                </div>
                <a id="logo-container" href="#" class="brand-logo"><img src="img/PhishX-Logo-Hor.png" alt="PhishX Logo" height="66" width="150" /></a>
                <a href="" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu white-text"></i></a>
                <ul id="nav-desktop" class="right hide-on-med-and-down teal lighten-2 white-text">
                    <b>
                    <li><a class="dropdown-button white-text" href="#!" data-activates="solution1">Solution <i class="mdi-action-dashboard right"></i></a></li>
                    <li><a href="#try" class="white-text">Contact <i class="mdi-action-perm-contact-cal right"></i></a></li>
                    <li><a class="dropdown-button white-text" href="#!" data-activates="language1">Language <i class="mdi-action-language right"></i></a></li>
                    <li><a href="https://portal.phishx.com/" class="white-text" target="_blank">Portal <i class="mdi-action-exit-to-app right"></i></a></li>
                    </b>
                </ul>
                <ul id="nav-mobile" class="right side-nav teal lighten-2 white-text">
                    <b>
                        <li><a class="dropdown-button white-text" href="#!" data-activates="solution1">Solution <i class="mdi-action-dashboard right"></i></a></li>
                        <li><a href="#try" class="white-text">Contact <i class="mdi-action-perm-contact-cal right"></i></a></li>
                        <li><a class="dropdown-button white-text" href="#!" data-activates="language1">Language <i class="mdi-action-language right"></i></a></li>
                        <li><a href="https://portal.phishx.com/" class="white-text" target="_blank">Portal <i class="mdi-action-exit-to-app right"></i></a></li>
                    </b>
                </ul>
            </div>
        </div>
    </nav>
</div>

My init.js:

...
$('.button-collapse').sideNav({
closeOnClick: true,
'edge': 'left'
});
$('.collapsible').collapsible();
...

[bryanisimo]

This happens to me too, I need to put mouse outside to close instead of click reaction

[bobrocke]

I think I have a similar, but different problem. If the links in the side menu go to anchors on the same page such as <li><a href="#top">Top</a></li>, the sidenav does not disappear even though the link works and the page scroll.

In case this is not the same problem, I've opened a separate issue, too.

[akyunus]

SideNav also dont closes when I click on an icon on page. It becomes locked as fixed.

[jfuentesa]

The same with me when menuWidth: '250px', clicks everywhere and menu no closes.

[abds5]

to bobrocke,I have the same problem as you, have you found a solution?

[bobrocke]

@abas5 I don't have the problem with the latest version of the framework.

[daVinci13]

Just add on click event to a tag:
<a href="#section-contact" onclick="$('.button-collapse').sideNav('hide');">Home</a>

[atchyutn]

$('.button-collapse').sideNav({
          menuWidth: 300, // Default is 240
          closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
        }
      );
      $('.collapsible').collapsible();

Use this script.

[crobinson42]

Just add on click event to a tag:
Home

Where is this in the docs??

[Dogfalo]

This has been reworked in v1-dev so that any element with the class sidenav-close that is clicked will cause the sidenav to close. This will be more flexible in its use than the previous option.

The option closeOnClick has been removed.

[sudonitin]

There's no need for an extra js, jquery function.
This answer here worked for me.