在当前页面上保持 Jquery 个手风琴菜单打开

Question

我相信在我的特殊情况下我会得到帮助。毫无疑问，有很多解决方案可以实现这一目标，但就我而言，我无法实现。以下是我使用 java 脚本动态生成 html 的代码。

编辑 1：我只想根据锚标记的 href 属性保持打开当前手风琴面板，实际上是当前页面 URL。就是这个了

生成JS代码html:

<script>
  $.ajax({
    url: "/categories",
    type: 'GET',
    success: function(data) {
      var content = "";

      content += '<div id="category-navigation">';
      for (i = 0; i < data.length; i++) {

        content += '<div class="head">';
        content += '<label class="categoryLables">' + data[i].title;
        content += '</label>';

        content += '<div>';
        content += '<div class="boardsMargin">';
        content += '<ul>';

        for (j = 0; j < data[i].assigned_boards.length; j++) {

          content += '<li>';
          content += "<a href='/#categories/" + data[i].id + "/boards/" + data[i].assigned_boards[j].id + "'>";
          content += data[i].assigned_boards[j].name;
          content += '</a>';
          content += '</li>';
        }

        content += '</ul>';
        content += '</div>';
        content += '</div>';
        content += '</div>';
      }
      content += '</div>';

      $("#myNavigation").html("");
      $("#myNavigation").html(content);

      $('.head').accordion({
        heightStyle: "content",
        active: true,
        collapsible: true
      });


    }

  });

 </script>

HTML:

<div class="myNavigation">
</div>

编辑 2：为了更清楚的视图，这是我手风琴的照片。

附带说明：我在 ruby 2.2.1 和 rails 4.1

中工作

Answer 1

尝试根据要保持打开的面板索引设置 active 选项，即 0、1、2 等，并将 collapsible 设置为 false

根据文档：

Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.

参考：http://api.jqueryui.com/accordion/#option-active

JS:

$('.head').accordion({
    heightStyle: "content",
    active: 1, //Change this
    collapsible: false
});

Answer 2

您可以像这样使用 localStorage：

$(function () {
    $("#accordion").accordion();
    if (localStorage.getItem('active') != null) {
        $($('h3').get(parseInt(localStorage.getItem('active')))).trigger("click");
    }
});

$('h3').click(function () {
    localStorage.setItem('active', $(this).index("h3"));
});

Here is the JSFiddle demo:)

注意：您可能还想阅读有关 sessionStorage

的内容

在当前页面上保持 Jquery 个手风琴菜单打开

Keep Jquery accordion menu open on current page

html

javascript

jquery

jquery-ui-accordion