CODEWITHSUNDEEP
jquerycssdrop-down-menubackground-colortwitter-bootstrap-3
midstack
midstack

Reputation: 2123

Change siblings li background color for bootstrap 3 dropdown menu

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?

Upvotes: 0

Views: 1183

Answers (1)

412
412

Reputation: 1448

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

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

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

Upvotes: 1

Related Questions