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

Question

我的网站同时使用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文件（顶部导航栏.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 类的 CSS 如下所示：

.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;}

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

Answer 1

在

菜单中的当前页面链接上设置活动类。取代：

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

由

{% 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 %}

请注意，我不做{% for page in section.subpages %}因为page是一个已经存在的变量，其中包含当前页面数据。

由于我们不能用纯CSS选择活动链接父级，所以我们使用一些jquery。将其放在页面底部，就在结束正文标记之前。

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