Automatically collapse drop-down navbar menu on mobile when back button pressed

Question

I have a Bootstrap site with a collapsed navbar in the mobile view. It works fine except that when the drop-down navbar menu is open and the user presses the back key on his mobile device, it stays although the browser does go back to the last page. So how can I collapse the drop-down navbar menu (if open) when the back button is pressed? I tried the following but it doesn't do anything:

$(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    var opened = $('.navbar-collapse').hasClass('collapse in');
    if ( opened === true ) { $('.navbar-collapse').collapse('hide'); }
  }
});

Do note that I have already included the latest full version of JQuery Mobile (1.4.5) on my page. I even tried replacing the code inside the second if() block with a simple alert() but even that doesn't work so it seems the if() block isn't even triggering. Not sure if it's even catching the event. Is there another way to accomplish this?

NOTE: To ensure Clayton's comment doesn't mislead visitors with a potential answer, this question is NOT a duplicate for two reasons:

The problem described in my question is on Chrome Android and not Safari iOS, and
The question he claims to be related is about navigation issues where pressing the back button isn't taking the user back to the previous page, whereas my question is about a drop-down sub-menu which isn't collapsing when the back button is pressed. My page navigations are working fine.

Possible duplicate of [Mobile Safari back button](http://stackoverflow.com/questions/11979156/mobile-safari-back-button) — Clayton Leis, Feb 01 '16 at 10:05
Also, I have no idea how this question could be even related to the one suggested by Clayton Leis. That question is about navigation issues where the back button isn't bringing back the last browsed page whereas my navigation is working just fine except that the dropdown menu refuses to collapse when the back button is pressed. So easy to flag a question without even attempting to comprehend it in the first place. — TheLearner, Feb 01 '16 at 11:18
Sorry. You might find this page helpful. http://www.w3schools.com/js/js_debugging.asp — Clayton Leis, Feb 01 '16 at 11:19

score 1 · Answer 1 · answered Jan 08 '17 at 06:27

I had a similar problem:

When someone opened the navbar, clicked a link and then on that page pressed the back button, it would bring us back a page with the navbar dropdown showing.

This was caused by turbolinks.

Like the original question, the above code does not help because of the way turbolinks uses javascript to change content on your page. the solution is to create an .on('click', function(){ to removeClass('in') when a link is clicked in the dropdown.

Now all is working well.

score 0 · Answer 2 · answered Mar 04 '18 at 00:20

I am using Bootstrap 4.

This is how I solved this problem in my application. The id of the sidebar is sidebar and the anchor tag inside the list item has class .nav-link. The class open had to be removed. Hope this gives some idea.

$(document).ready(function() {
    $(".nav-link").click(function(event) {
        $("#sidebar").removeClass("open");
    });
});

score 0 · Answer 3 · answered Sep 09 '19 at 16:25

 $('#menu1').on("click", function (e) {
  window.history.pushState('forward', null, './#dropdown');
    });
    $(window).on('popstate', function () {
     $('#menu1').dropdown("toggle");
    });

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
      <li role="presentation" class="divider"></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>    
    </ul>
  </div>
</div>

</body>

Automatically collapse drop-down navbar menu on mobile when back button pressed

3 Answers3