Question

我有这个导航：

<div class="collapse navbar-collapse" id="wire-nav">
<ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false">Our Company
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li class="dropdown-submenu">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                    Safety
                    <span class="right-caret"></span>
                </a>
            </li>
            <li class="dropdown-submenu">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                    Customer Service
                    <span class="right-caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li class="active">
                        <a href="#" target="_self">Customer
                            Satisfaction Index (CSI)</a>
                    </li>
                </ul>
            </li> 
        </ul>
    </li>      
</ul>

当用户在“客户满意度指数”页面（或“我们的公司”的任何子页面）上时，我要加粗“我们的公司”根元素。如何使用CSS和/或jQuery作为目标？仅当用户在该页面上时，才应用“活动”类。

谢谢。

Answer 1

$(".active").closest(".dropdown").find(".dropdown-toggle").css({"font-weight":"bold"});

说明：

$(".active")是起点。

.closest(".dropdown")的目标是祖先列表中的<li class="dropdown">。

.find(".dropdown-toggle")在上一个结果的子级中查找以下内容。

<a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false">Our Company
  <span class="caret"></span>
</a>

因此，您应用了一些CSS：

.css({"font-weight":"bold"});

查找这些文档页面以获取更多信息：

.closest()，.find()，.css()

如何使用jQuery查找嵌套子元素的根li？

1 个答案: