Navid_pdp11 Navid_pdp11 -4 years ago 126
jQuery Question

Bootstrap dropdown menu does not collapse in angularjs spa application

i am using bootstrap LTR 3.1.1 in an angularjs SPA project. i am using this code to create dropdown menu in my application:

bootstarp dropdown menu example

but when i click on dropdown link Submenus wont appear and my app will redirect to its root directory.

how can i resolve this problem?

Answer Source

We had a similar problem on a project with angular + bootstrap where dropdown elements would redirect to root. We changed the

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

into

<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

The href="#" is indeed referring to the root of your app, removing that and replacing it with that removes the link while maintaining the pointer cursor. Alternatively, you could add a CSS class like

.pointerCursor {
  cursor: pointer;
}

and replace the <a> tag with a <span> tag and append the class to the new span element.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download