更改 bootstrap 3 下拉菜单的兄弟姐妹 li 背景颜色答案

【问题标题】：Change siblings li background color for bootstrap 3 dropdown menu更改 bootstrap 3 下拉菜单的兄弟姐妹 li 背景颜色
【发布时间】：2013-11-04 13:59:11
【问题描述】：

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 背景颜色我想要这样;

点击了下拉链接；

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

【问题讨论】：

标签： jquery css drop-down-menu background-color twitter-bootstrap-3

【解决方案1】：

您可以为之前的兄弟姐妹切换引导程序 .active 类：

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

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

【讨论】：

这很好用，因为没有 CSS 上一个兄弟选择器。
有效，但是当点击字段时，除了箭头背景颜色不会改变
当你点击下拉菜单时，背景颜色会改变，但如果你点击页面的空白区域，背景颜色不会改变