Bootstrap dropdown does not close on click navigation


#1
> <!-- Navigation -->
>    <nav class="navbar navbar-default navbar-custom">
>        <div class="container-fluid">
>            <!-- Brand and toggle get grouped for better mobile display -->
>            <div class="navbar-header page-scroll">
>                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
>                    <span class="sr-only">Toggle navigation</span>
>                    <span class="icon-bar"></span>
>                    <span class="icon-bar"></span>
>                    <span class="icon-bar"></span>
>                </button>
>                AwesomeApp
>            </div>

>            <!-- Collect the nav links, forms, and other content for toggling -->
>            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
>                <ul class="nav navbar-nav navbar-right" >
>                    <li>
>                        <a href="/">Home</a>
>                    </li>
>                    <li>
>                        <a href="/books">Books</a>
>                    </li>
>                    <li>
>                        <a href="/pens">pens</a>
>                    </li>
>                    <li>
>                        <a href="/story">Story</a>
>                    </li>
>               </ul>

>            </div>
>            <!-- /.navbar-collapse -->
>        </div>
>        <!-- /.container -->
>    </nav>

That is the code I used on the html page. The drop down appears. But once I click the link it goes to the destination but the menu does not close. It stays on dropdown.

How do I fix it?


#2

I solved it by attaching an event listener to the navbar menu list items. Didn’t know how else to do it

  // Closes the Responsive Menu on Menu Item Click
  'click .navbar-collapse ul li a.toggle-navbar': function(event,template) {
    // is the menu visible
    if(template.$('#bs-example-navbar-collapse-1').is(':visible')) {
      // click the toggle button
      template.$('.menu-toggle:visible').click();
    }
  }