javascript - 使用 Javascript 在 <li> 处于事件状态时更改背景颜色

Question

我想更改 <li> 的背景颜色当我点击那些 li > a 时，类(class)活跃的地方.在这种情况下我该怎么做。他是我试过的:

脚本

<script>
    $('.sidebar-collapse .nav > li > a').click(function (e) {
        var $this = $(this);
        if ($this.hasClass('active')) {
            $this.removeAttr('background');
        }
    });
</script>

风格

.sidebar-collapse .nav > li > a {
    background: #EFEFEF;
    text-shadow: none;
    color: #595959;
    border-top: 1px solid #dfdfdf;
}

菜单列表 HTML

<nav class="navbar-default navbar-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav" id="main-menu">
            <li>
                <a href="default.aspx"><i class="fa fa-desktop "></i>Dashboard</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-edit "></i>UI Elements<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="#">Notifications</a>
                    </li>
                    <li>
                        <a href="#">Elements</a>
                    </li>
                    <li>
                        <a href="#">Free Link</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#"><i class="fa fa-table "></i>Table Examples</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-edit "></i>Forms </a>
            </li>
            <li>
                <a href="#"><i class="fa fa-sitemap "></i>Multi-Level Dropdown<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="#">Second Level Link</a>
                    </li>
                    <li>
                        <a href="#">Second Level Link</a>
                    </li>
                    <li>
                        <a href="#">Second Level Link<span class="fa arrow"></span></a>
                        <ul class="nav nav-third-level">
                            <li>
                                <a href="#">Third Level Link</a>
                            </li>
                            <li>
                                <a href="#">Third Level Link</a>
                            </li>
                            <li>
                                <a href="#">Third Level Link</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#"><i class="fa fa-qrcode "></i>Tabs & Panels</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-bar-chart-o"></i>Mettis Charts</a>
            </li>

            <li>
                <a href="#"><i class="fa fa-edit "></i>Last Link </a>
            </li>
            <li>
                <a href="blank.aspx"><i class="fa fa-table "></i>Blank Page</a>
            </li>
        </ul>
    </div>
</nav>

Answer 1

如果您受限于 js 解决方案，则需要使用 css .由于 background 不是属性而是样式，无法“删除”。

$('.sidebar-collapse .nav > li > a').click(function (e) {
    var li = $(this).closest('li');
    if (li.hasClass('active')) {
        li.css('background-color', 'transparent'); //or inherit
    }
});

或者纯 CSS 解决方案。哪个是首选:

.sidebar-collapse .nav > li.active > a {
    background-color: transparent;
}