Question

我想根据我所在的页面更改侧边菜单突出显示的字段。我一整天都在努力，似乎无法解决这个问题。

HTML：

<!--- Start Side Navigation --->
<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">
            <li class="nav-header">
                <div class="dropdown profile-element">
                 {% if sma.active == True %}
                      <span>
                          <img alt="image" class="img-circle" height="80" width="80" src="{{ sma.profile_picture_object.thumbnail_url }}" />
                      </span>
                 {% endif %}
                     <a data-toggle="dropdown" class="dropdown-toggle" href="#" aria-expanded="true">
                         <span class="clear">
                             <span class="text-muted text-xs block">
                                 <img src="small.png"> 
                             </span>
                         </span>
                      </a>
                  </div>
              </li>
              <li class="active">
                  <a href="{% url 'website:dashboard' %}">
                      <i class="fa fa-linode"></i>
                          <span class="nav-label">Dashboard</span>
                  </a>
              </li>
              <li class="">
                  <a href="#">
                      <i class="fa fa-user-o"></i>
                          <span class="nav-label">Accounts</span>
                              <span class="fa arrow"></span>
                  </a>
                  <ul class="nav nav-second-level">
                      <li class="">
                          <a href="{% url 'website:accounts_detail' sma.id %}">Current Account</a>
                      </li>
                      <li>
                          <a href="{% url 'website:accounts_edit' %}">Edit Account
                          </a>
                      </li>
                      <li>
                          <a href="{% url 'website:accounts_list'%}">Switch Account
                          </a>
                      </li>
                      <li>
                          <a href="{% url 'website:accounts_add' %}">Add Account
                          </a>
                      </li>
                  </ul>
              </li>
              <li>
                  <a href="#">
                      <i class="fa fa-sitemap"></i>
                          <span class="nav-label">Ambassadors</span>
                              <span class="fa arrow"></span>
                  </a>
                  <ul class="nav nav-second-level">
                      <li>
                          <a href="{% url 'website:ambassadors_list_active' %}">Search
                          </a>
                      </li>
                      <li>
                          <a href="{% url 'website:ambassadors_list_requested' %}">Requested
                          </a>
                      </li>
                      <li>
                          <a href="{% url 'website:ambassadors_list_authorized' %}">Authorized
                          </a>
                      </li>
                  </ul>
              </li>
          </ul>
      </div>
  </nav>

JS：

<script>
        $(document).ready(function () {
            var url = window.location;
            var element = $('ul.nav a').filter(function() {
                return this.href === url || url.href.indexOf(this.href) === 0;
            }).addClass('active');
            $(element.parents()).each(function() {
                if (this.className.indexOf('collapse') !== -1) {
                    $(this).addClass('in');
                }
            });
            element = element.parent().parent().parent();
            if (element.is('li')) {
                element.addClass('active');
            }
            $(function () {
                $('#side-menu').metisMenu();

            });
        });
    </script>

目前仅适用于帐户页面，只能取消折叠下拉列表。我似乎无法弄清楚如何突出/激活正确的li类。我也尝试过使用django模板，但是大多数网址与url路径为/ accounts / userID /的帐户非常相似。

我很感激任何帮助，我一直在努力工作几个小时。我觉得我在最后的编辑方面取得了进展。

编辑：

它也不会从仪表板li中删除活动类

Answer 1

使用django模板标签的纯django解决方案是利用request.resolver_match。

因此，对于您想要突出显示的每个项目，请添加以下内容：

    <li class="{% if request.resolver_match.url_name == "website:accounts_detail" %}active{% endif %}" />

django metismenu导航活动页面更改

1 个答案: