Question

我需要在页面上安装多个手风琴，以便我可以同时打开它们，我需要浏览器在页面上的链接被点击直到下一个会话时记住最后一个活动的手风琴或手风琴。但是，我需要手风琴开始倒塌。

这就是我要感谢answer：

<div id="accordion-one" class="genericClass">
    <h3 class="genericHeading">Heading1</h3>
    <div class="genericSub">
         <div class="genericData"><a href="#" target="_parent">Data1</a></div>
         <div class="genericData"><a href="#" target="_parent">Data2</a></div>
         <div class="genericData"><a href="#" target="_parent">Data3</a></div>
         <div class="genericData"><a href="#" target="_parent">Data4</a></div>         
    </div>
</div>
<div id="accordion-two" class="genericClass">
    <h3 class="genericHeading">Heading2</h3>
    <div class="genericSub">
         <div class="genericData"><a href="#" target="_parent">Data1</a></div>
         <div class="genericData"><a href="#" target="_parent">Data2</a></div>
         <div class="genericData"><a href="#" target="_parent">Data3</a></div>
         <div class="genericData"><a href="#" target="_parent">Data4</a></div>         
    </div>
</div>
<div id="accordion-three" class="genericClass">
    <h3 class="genericHeading">Heading3</h3>
    <div class="genericSub">
         <div class="genericData"><a href="#" target="_parent">Data1</a></div>
         <div class="genericData"><a href="#" target="_parent">Data2</a></div>
         <div class="genericData"><a href="#" target="_parent">Data3</a></div>
         <div class="genericData"><a href="#" target="_parent">Data4</a></div>         
    </div>
</div>

这是Jquery：

$(function() {
$('.genericClass').each(function(i,elem) {
    $(this).accordion({
         collapsible: true,
         navigation: true,
         activate: function(e, ui) {
             sessionStorage.setItem('accordion-active'+i, $(this).accordion( "option", "active"));
         },
         active: false && +sessionStorage.getItem('accordion-active'+i) 
    });
});
});

以下是fiddle

的链接

有任何帮助吗？因为我无法弄清楚如何让所有的手风琴在初始会话状态下折叠而不是在初始会话状态下都处于活动状态。

Answer 1

我回答了我自己的问题，我需要添加parseInt而不是假。

$(function() {
$('.genericClass').each(function(i,elem) {
    $(this).accordion({
         collapsible: true,
         navigation: true,
         activate: function(e, ui) {
             sessionStorage.setItem('accordion-active'+i, $(this).accordion( "option", "active"));
         },
         active: parseInt(sessionStorage.getItem('accordion-active'+i)) 
    });
});
});

所以，任何想要在页面上拥有多个手风琴并让它们最初加载为折叠状态的人，但记住会话中的活动状态可以在HTML5中像这样做而不需要cookie。

页面上的多个JQuery Accordions加载已折叠，但在单击页面链接时记住上次活动

1 个答案: