Bootstrap dropdown menu does not collapse in angularjs spa application

Question

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?

Fissio · Accepted Answer · 2015-05-23 14:40:17Z

1

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 </a>

into

<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown </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  tag and append the class to the new span element.

answered May 23, 2015 at 14:40

Fissio

3,75818 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Navid_pdp11 Over a year ago

thank you ... it was useful for me .....another solution is using angular-strap or using ui-router or angular-ui but your suggest was short and easy .... :)

Collectives™ on Stack Overflow

Bootstrap dropdown menu does not collapse in angularjs spa application

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related