CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapangular-ui-bootstrap
MEAN Developer
MEAN Developer

Reputation: 277

UI-Bootstrap Collapse doesn't reset on new route

Working example: http://executionists.com (view in mobile viewport to see the problem)

I'm using the collapse directive from UI Bootstrap and it works great to toggle my menu on/off. However, when I click a menu item, I'm routed to a new view (which is what it should do) but then the menu stays open. It actually flashes for a second as it appears to be collapsing but then springs back open and wont collapse until manually done.

HTML:

<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">
  <i class="fa fa-bars fa-4"></i>
</button>

<div class="container mobile-menu visible-xs collapse" collapse="isCollapsed">
  <a ng-href="#/about">About</a>
</div>

In the relevant controller, I simply set a default state:

$scope.isCollapsed = true;

What am I missing?

Upvotes: 0

Views: 898

Answers (1)

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Try adding something like this if I understand that this is want you need

  $("div.container.mobile-menu.visible-xs.collapse div.row div.col-1 ul a").click(function() {
          if (window.location.hash) {
              $('.mobile-menu').height(0); //change the menu to be 'Hidden'
          }
  });

UPDATE

$("div.container.mobile-menu.visible-xs.collapse div.row div.col-1 ul a").click(function() {
    $('.mobile-menu').toggle(function() {
        if (window.location.hash) {
            $('button.btn.btn-default').click();
        }
    });
});

Upvotes: 1

Related Questions