toggleClass from within the fully outed menu

Question

I can't seem to make it work. when i click on the menu icon, the menu comes out ok and it closes when i click again. but how do i toggle when i click and a url within the menu itself? I tried adding a class to each li and adding the clas on the function i tried meny thing. maybe its because i have angular on the li?

<div class="icomMenu"></div>
<navbar class="">
<nav class="nav">
    <ul>
        <li><a ui-sref="index" ui-sref-active="active">Home</a></li>
        <li><a ui-sref="About" ui-sref-active="active">About</a></li>
        <li><a ui-sref="Contact" ui-sref-active="active">Contact</a></li>
        <li><a ui-sref="Nested" ui-sref-active="active">Nested</a></li>
    </ul>
</nav>
</navbar>

$(document).ready(function() {
    $(".icomMenu").click(function() {
        $("navbar").toggleClass("NavOut");
    });
});

thank you.

Possible duplicate of [Bootstrap close responsive menu "on click"](http://stackoverflow.com/questions/14203279/bootstrap-close-responsive-menu-on-click) — Michelangelo, Dec 04 '16 at 20:55
Thank you Michelangelo. "Binding click event on all a elements in navigation to collapse menu" did the trick. changing my advanced nested stateProvider to just state was to overkill for something the binding solve. — l3ny, Dec 06 '16 at 02:00

Maksym · Answer 1 · 2016-12-05T09:37:11.003

Since I see you are using angular I would recommend going against using jQuery and instead using component/view controller to handle this. You can for example add ng-class="{'NavOut': vm.menuVisible}" to your navbar HTML element and then instead of using ui-sref on the li elements you can use ng-click="vm.onMenuItemClick("About")" then in controller you can inject $state and create method onMenuItemClick(link) that will set this.menuVisible = false and go to another route with this.$state.go(link).

EDIT: Template: <div class="icomMenu"></div> <navbar ng-class="{'NavOut: vm.menuVisible}"> <nav class="nav"> <ul> <li><a ng-click="vm.onMenuClick('Home')" ui-sref-active="active">Home</a></li> </ul> </nav> </navbar>

Controller:

constructor($state) {
  this.$state = $state;
}

this.onMenuClick(link) {
  this.$state.go(link);
  this.menuVisible = false;
}

Something like that, I hope you get the idea. The navbar seems like the ideal candidate for creating an component then use it's controller to handle the logic above.

Maksym , I tried messing up with angular and am using $stateProvider which i think its the same method as $state but you put too much information here and is not clear to me. its not you but cumbersome thank you anyways. — l3ny, Dec 04 '16 at 22:22

toggleClass from within the fully outed menu

1 Answers1