使用 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 文件 (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 类的 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。将其放在页面底部，就在结束 body 标记之前。

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