时间戳

首页 > 解决方案 > Boostrap 侧边栏父菜单链接未显示子菜单

javascript - Boostrap 侧边栏父菜单链接未显示子菜单

问题描述

我在 Shopify 上使用 bootstrap 创建了一个侧边栏菜单，以循环遍历 3 个级别的嵌套菜单结构。我面临的问题是父菜单默认情况下不链接到集合页面，它只显示子菜单和孙菜单通过和伪 :after 元素。

我知道不能使用 jQuery 选择伪元素，所以我添加了一个简单的函数来定位添加 URL 的父菜单的 URL，这很好，但我希望 .collapsible:after 元素仍然显示子菜单，同时<span class="nav-test">转到 URL。请参阅下面的代码；

HTML 标记

    {% for link in linklists[settings.mobile_linklist].links %}
    {% if link.links != blank %}
      <div class="nav-menu">
        <ul id="accordion">

          <li class="accordion">
            <span class="nav-test">
              <a href="{{ link.url }}"
               aria-controls="collapseOne"
               aria-expanded="false"
               class="collapsible"
               data-target="#collapse{{forloop.index}}"
               data-toggle="collapse">{{ link.title }}
              </a>
            </span>
            <!-- Sub menu -->
            <div aria-labelledby="headingOne" class="sub-menu collapse" id="collapse{{forloop.index}}">
              <ul>
                {% for childlink in link.links %}
                <li>
                  <a href="{{childlink.url}}"
                    aria-controls="collapseOne"
                    aria-expanded="false"
                    class="collapsible"
                    data-target="#collapse2{{forloop.index}}"
                    data-toggle="collapse">{{childlink.title}}
                </a>
                  <ul id="collapse2{{forloop.index}}">
                    {% for grandchild_link in childlink.links %}
                    <li>
                      <a href="{{grandchild_link.url}}">{{grandchild_link.title}}</a>
                    </li>
                    {% endfor %}
                  </ul>
                </li>
                {% endfor %}
              </ul>
            </div>

          </li>

        </ul>
      </div>
    {% endif %}
    {% endfor %}

添加 URL 的脚本

  $(function($) {
    $('.nav-test > a').click(function(){
      location.href = this.href;
    });
  });

CSS

#aside_main .side-inner .nav-menu ul li.active a:before {
  opacity: 1;
  visibility: visible;
  width: 4px; 
}

#aside_main .side-inner .nav-menu ul li .collapsible {
  position: relative; 
}

#aside_main .side-inner .nav-menu ul li .collapsible:after {
  font-size: 18px;
  position: absolute;
  top: 15px;
  right: 30px;
  width: 10px;
  height: 10px;
  font-family: 'Font Awesome 5 Free';
  content: " ";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='Icon Icon--select-arrow' role='presentation' viewBox='0 0 19 12'%3E%3Cpolyline fill='none' stroke='currentColor' points='17 2 9.5 10 2 2' fill-rule='evenodd' stroke-width='2' stroke-linecap='square'%3E%3C/polyline%3E%3C/svg%3E") no-repeat;
  color: #1C1B1B;
  font-weight: 700;
  line-height: 20px;
  -webkit-transition: .3s transform ease;
  -o-transition: .3s transform ease;
  transition: .3s transform ease; 
}

#aside_main .side-inner .nav-menu ul li .collapsible[aria-expanded="true"] {
  background: #fcfcfc;
  color: #000; 
}

#aside_main .side-inner .nav-menu ul li .collapsible[aria-expanded="true"]:before {
  opacity: 1;
  visibility: visible;
  width: 4px; 
}

#aside_main .side-inner .nav-menu ul li .collapsible[aria-expanded="true"]:after {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 15px; 
}

标签： javascripthtmljquerycsstwitter-bootstrap

解决方案

您的代码有多次链接，因此您也必须提供特定的父节点

https://api.jquery.com/parents/

给定一个表示一组 DOM 元素的 jQuery 对象， .parents() 方法允许我们在 DOM 树中搜索这些元素的祖先，并从从直接父级开始排序的匹配元素构造一个新的 jQuery 对象

 $(function($) {
    $('.nav-test > a').click(function(){
      location.href = this.parents.href;
    });
  });

推荐阅读