Продолжить открытие меню аккордеона JQuery на текущей странице

Question

Уверен, что я получу помощь в моем конкретном случае. Нет сомнений, что для этого есть много решений, но в моем случае я не могу этого добиться. Ниже приведен мой код для генерации html динамически с использованием java-скрипта.

Редактировать 1: Я просто хочу открыть текущий кастрюлю аккордеона в соответствии с атрибутом тега привязки, который на самом деле является текущим URL-адресом, по атрибуту привязки href. Это оно.

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: Для более четкого представления, это изображение моего аккордеона.

В качестве примечания: я работаю в рубине 2.2.1 и рельсы 4,1

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")); 
}); 

Here is the JSFiddle demo :)

Примечание: Вы можете ALS o хочу прочитать о sessionStorage

Answer 2

Попробуйте установить active опции в гармошке индекса панелей вы хотите держать открытым т.е. 0,1, 2 и т.д., и установить collapsible к false

в соответствии с Документами:

Integer: Индекс на основе нуля активной панели (открыт). Отрицательное значение выбирает панели, идущие назад от последней панели.

Ссылка: http://api.jqueryui.com/accordion/#option-active

JS:

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