2

我的网站同时使用 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;}

是否有一种干净的方法可以为活动页面的父级的导航标题添加突出显示？

4

1 回答 1

4

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

{% 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>
于 2015-04-22T00:21:32.980 回答