Css 使用Jekyll和Bootstrap突出显示多级导航标题中的活动父级

我的网站使用了Jekyll和Bootstrap，主导航标题是一个下拉列表。我希望只要用户在相应的子页面上（例如，解决方案>解决方案1），父项（例如，解决方案）就会在标题中突出显示

我的Jekyll导航文件（navigation.yml）的格式如下：

- title: Solutions
  url: /solutions
  subpages:
    - title: Solution 1
      url: /solutions/1
    - title: Solution 2
      url: /solutions/2
    - title: Solution 3
      url: /solutions/3

- title: Products
  url: /products
  subpages:
    - title: Product A
      url: /products/a
    - title: Product B
      url: /products/b
    - title: Product C
      url: /products/c

我的导航HTML文件（top navbar.HTML）如下所示：

<header class="navbar " role="navigation" style="margin-bottom: 0">
    <div class="container main-header">
        <div class="navbar-header">
            <button class="navbar-toggle bar-button" type="button" data-toggle="collapse" data-target=".site-navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/">
                <img src="/static/img/logo.png">
            </a>
        </div>        
        <div class="collapse collapse-inverse navbar-collapse site-navbar-collapse">
            <ul class="nav navbar-nav navbar-right site-nav">
                {% for section in site.data.navigation %}
                <li class="dropdown " >
                    <a href="{{ section.url }}">{{ section.title }}</a>
                    {% if section.subpages %}
                    <ul class="dropdown-menu " >
                        {% for page in section.subpages %}
                        <li ><a href="{{ page.url }}">{{ page.title }}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </li>
                {% endfor %}                
            </ul>        
        </div>
    </div>
</header>

.site-nav:last-child{margin-right:15px;}
.site-nav>li>a{padding:10px 17px;color:#545454;}
.site-nav>li>a.selected{background-color:#acacac;color:#f9f9f9;}
.site-nav>li>a.current{background-color:#acacac;color:#f9f9f9;}

---

是否有一种干净的方法可以将高亮显示添加到活动页面父级的导航标题中？

在菜单中的当前页面链接上设置活动类。替换：

{% for page in section.subpages %}
  <li ><a href="{{ page.url }}">{{ page.title }}</a></li>
{% endfor %}

---

谢谢你的回复，大卫！我不知道把新代码放在HTML文件的什么地方。你能帮我一下吗？我试过你的建议，但仍然没有在标题中突出显示家长。你知道为什么吗？

{% for p in section.subpages %}
  <li{% if p.url == page.url %} class="active"{% endif %}>
    <a href="{{ site.baseurl }}{{ p.url }}">{{ p.title }}</a>
  </li>
{% endfor %}

<script>$("li.active").parents('li').toggleClass("active");</script>