单击下一页时折叠手风琴菜单

Question

我在菜单中制作了一个基于手风琴的菜单.php.

比方说
菜单.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>

在我调用菜单的所有其他页面上.php使用 include("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 的代码片段上模拟......