JS Accordion 在单击链接时保持打开状态

Question

我正在使用 php 从数据库中获取项目并生成一个 html 表来列出每个项目。

在 html 表格的左侧，我有一个带有 javascript 制作的手风琴功能的侧边菜单。

每个手风琴内部都有用于对表格进行排序的各种搜索参数的链接。例如每个流派的链接。

如果我单击其中一个手风琴，例如“All Genres A-Z”，它会展开并列出所有流派。但是，如果我然后单击手风琴内的链接之一，页面会自然重置并且手风琴会关闭，因为页面重新加载（使用新的搜索参数）。

我的手风琴基于以下问题：How to make accordion stay open，但由于我的所有链接都是指向同一页面 (browse.php) 的搜索参数，因此我无法使用该问题中提出的相同解决方案。

- 有没有办法让选定的手风琴保持打开状态，即使在点击其中的一个链接后也是如此？

这是一个很好的例子，说明我希望它如何表现（左侧的菜单）47Admin bootstrap theme

js:

$('.trigger-button').click(function() {
    $(".trigger-button").removeClass("active")
    $('.accordion').slideUp('normal');
    if($(this).next().is(':hidden') == true) {
        $(this).next().slideDown('normal');
        $(this).addClass("active");
     } 
 });
$('.accordion').hide();

browse.php上的html：

<div class='trigger-button'>Favorite Genres</div>
<div class='accordion'>
   <ul>
      <li><a href='browse.php&genre=drama'>Drama</a></li>
   </ul>
</div>

<div class='trigger-button'>All Genres A-Z</div>
<div class='accordion'>
   <ul>
      <li><a href='browse.php&genre=drama'>Drama</a></li>
      <li><a href='browse.php&genre=thriller'>Thriller</a></li>
   </ul>
</div>

Link to the fiddle used in the other question

Answer 1

我假设您的意思是 link 代表 List One 和 List Two。那么这里是你的fiddle

编辑：

在常规页面重新加载中，会重置 javascript 中的所有状态。基本上你必须在页面加载中进行反向操作

1. 在地址栏中选择网址。
2. 与锚标记中的 href 属性匹配。
3. 然后展开各自的手风琴。

您也可以在 PHP 代码中执行此操作，方法是在要打开的元素中设置类。但是，我觉得用 PHP 处理这个有点吵。

希望关注fiddle给你一些想法