Change siblings li background color for bootstrap 3 dropdown menu

Question

HTML

<div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li> <a href="#about">User01</a> </li> <li> <a href="#contact">Profile</a> </li> <li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <li> <a href="#">User Control01</a> </li> <li> <a href="#">User Control02</a> </li> <li> <a href="#">User Control03</a> </li> </ul> </li> <li> <a href="#contact">Link</a> </li> </ul> </div>

When clicked Dropdown link change User01 and Profile li background color I want like this;

enter image description here

Dropdown Link clicked;

enter image description here

How can I do this with bootstrap 3 dropdown menu?

412 · Accepted Answer · 2013-10-25 14:19:02Z

1

You can toggle bootstraps .active class for the previous siblings:

$(".dropdown").click(function(){ $this).prevAll().toggleClass("active"); });

Example: http://jsfiddle.net/52VtD/362/

edited Oct 25, 2013 at 14:19

answered Oct 25, 2013 at 12:43

412

1,45811 silver badges13 bronze badges

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

3 Comments

Carol Skelly Over a year ago

This works well since there is no CSS previous sibling selector.

midstack Over a year ago

Works but when clicked field except arrow background-color not change

midstack Over a year ago

when you clicked dropdown, li background color changing but if you clicked a blank field of page, background color not change

Collectives™ on Stack Overflow

Change siblings li background color for bootstrap 3 dropdown menu

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related