0

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?

1 Answer 1

1

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

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

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

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

3 Comments

This works well since there is no CSS previous sibling selector.
Works but when clicked field except arrow background-color not change
when you clicked dropdown, li background color changing but if you clicked a blank field of page, background color not change

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.