使用Jekyll和Bootstrap突出显示多级导航标题中的活动父项 [英] Highlighting the Active Parent in Multi-Level Navigation Header with Jekyll and 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类的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;}

是否有一种简单的方法可以将突出显示添加到活动页面父级的导航页眉？

推荐答案

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

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

这篇关于使用Jekyll和Bootstrap突出显示多级导航标题中的活动父项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！