保持jQuery手风琴菜单在当前页面打开

Question

我相信在我的特定情况下，你会提供帮助。毫无疑问，有许多解决方案可以实现这一点，但在我的情况下，我无法实现它。 以下是使用JavaScript动态生成HTML的代码。

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

生成HTML的JS代码：

<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。

- NN796

Answer 1

您可以这样使用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"));
});

点击这里查看JSFiddle演示 :)

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

- Ahs N

---

你的想法很好，但是我几个小时前编辑了我的问题，我的要求是当当前页面的URL与列表元素中的锚点href属性匹配时，打开特定的手风琴面板。希望你明白...！实际上，我的问题有点类似于这个问题：https://dev59.com/O3I-5IYBdhLWcg3w8dUQ - undefined

@EM923 可以做到，但是你能提供带有 href 标签的手风琴的 HTML 结构吗？ - undefined

请你看一下我的新问题：http://stackoverflow.com/questions/31971860/open-particular-jquery-accordion-pan-based-on-current-page-url。这个链接更加详细解释了问题。如果你需要更多信息，我可以提供给你。 - undefined

刷新页面后，它可以帮助我打开选定的手风琴面板！谢谢 - undefined

Answer 2

尝试将手风琴中active选项设置为您想要保持打开的面板的索引，例如0、1、2等，并将collapsible设置为false。

根据文档：

整数：活动（打开）面板的从零开始的索引。负值选择从最后一个面板开始向后的面板。

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

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

- K K

---

我刚刚编辑了它，将active: 1设置为true。但是在页面刷新后，手风琴仍然是折叠状态！:( - undefined

@EM923 设置可折叠为false。试一下。 - undefined

@K K 它的效果不太好，我刚刚更新了我的问题。 - undefined

你能为演示设置一个fiddle吗？ - undefined

其实我的问题有点类似于这个问题stackoverflow.com/questions/1602963/。 - undefined