当子项是当前页面Bootstrap 3时，使父下拉链接处于活动状态

Question

当孩子是当前页面时，我试图让父下拉链接处于活动状态？

<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#section1">Section1</a></li>
        <li><a href="#section2">Section2</a></li>
        <li class="dropdown">Section3<b class="caret"></b>
            <ul class="dropdown-menu">
                <li><a href="#child1">Child1</a></li>
                <li><a href="#child2">Child2</a></li>
            </ul>
        </li>
    </ul>
</div>

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  outline: 2px solid #fff;
}

Answer 1

阅读后：

• Is there a CSS parent selector?，
• Select <a> which href ends with some string和
• Get current URL in JavaScript?

我认为你可以利用jQuery做到这一点：

$('.dropdown-menu li a[href$="' + $(location).attr('pathname') + '"]').parents('li.dropdown').addClass('active');

根据菜单项中链接的结构，您应该采用$(location).attr('pathname')来满足您的需求。