CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
Navid_pdp11
Navid_pdp11

Reputation: 4012

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?

Upvotes: 2

Views: 1008

Answers (1)

Fissio
Fissio

Reputation: 3758

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.

Upvotes: 1

Related Questions