jquery - 更改 bootstrap 3 下拉菜单的 siblings li 背景颜色

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>

当点击 Dropdown 链接更改 User01 和 Profile li 背景颜色我想要这样;

点击了下 zipper 接；

如何使用 bootstrap 3 下拉菜单执行此操作？

Answer 1

您可以为之前的兄弟切换 Bootstrap .active 类:

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

示例:http://jsfiddle.net/52VtD/362/