在下一页上折叠 Accordion 菜单 onclick

Question

我在 menu.php 中制作了一个基于 Accordion 的菜单。

假设
menu.php

<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="headingOne">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Test</a>
    </h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
      <ul class="nav">
        <li class="active"><a href="/test/index.php">Take Test</a></li>
        <li><a href="/test/report.php">My Best Report</a></li>
        <li><a href="/test/repository.php">My Test</a></li>
        <li><a href="/test/about.php">About Test</a></li>
      </ul>
    </div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="headingTwo">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Training</a>
    </h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    <div class="panel-body">
      <ul class="nav">
        <li><a href="/training/">Recommended Training</a></li>
        <li><a href="/training/purchased.php">Purchased Training</a></li>
        <li><a href="/training/other.php">Other Training</a></li>
        <li><a href="/training/about.php">About Training</a></li>
      </ul>
    </div>
  </div>
</div>

在所有其他页面上，我使用 include("menu.php"); 调用 menu.php 现在我希望手风琴在打开链接时自动在下一页打开。我应该如何跟踪打开了哪个链接并激活该手风琴选项卡？

Answer 1

当路径名对应于链接时，您可以尝试一些 jQuery 将类添加到 li 及其父级：

$(document).ready(function() {
  var pathname = window.location.pathname; // Returns only path of URI
  var href_value;

  // Here, I force the pathname to be able to simulate
  // You won't need it in your application, but maybe some formatting
  pathname = "/training/purchased.php";

  // Loop for each li
  $(".nav li").each(function() {
    href_value = $(this).children("a").attr("href");

    // when "pathname" equals the href of the link
    if (pathname == href_value) {
      // Add "active" to li and "collapsed" to the menu
      $(this).addClass("active");
      $(this).closest(".collapse").addClass("collapsed");
    }

  })

});

.active a {
  color: red;
}

.collapse {
  display: none;
}

.collapsed {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="headingOne">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Test</a>
    </h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
      <ul class="nav">
        <li><a href="/test/index.php">Take Test</a></li>
        <li><a href="/test/report.php">My Best Report</a></li>
        <li><a href="/test/repository.php">My Test</a></li>
        <li><a href="/test/about.php">About Test</a></li>
      </ul>
    </div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="headingTwo">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Training</a>
    </h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    <div class="panel-body">
      <ul class="nav">
        <li><a href="/training/">Recommended Training</a></li>
        <li><a href="/training/purchased.php">Purchased Training</a></li>
        <li><a href="/training/other.php">Other Training</a></li>
        <li><a href="/training/about.php">About Training</a></li>
      </ul>
    </div>
  </div>
</div>

这很难在带有 URL 的 sn-p 上模拟……