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中的所有状态。基本上你必须在页面加载中进行反向操作

在地址栏中选择网址。

与锚标记中的href属性匹配。

然后展开各自的手风琴。

你也可以在PHP代码中设置你想要打开的元素中的类。但是，我觉得在PHP中处理这个有点吵。

希望跟随fiddle给你一些想法

JS手风琴在点击链接时保持打开状态

1 个答案: