多个JQuery手风琴在页面加载时会折叠,但请记住点击页面上的链接时的最后一个活动

adolor 发布于 2019-06-12 html 最后更新 2019-06-12 21:16 2 浏览

我需要在一个页面上有多个手风琴,以便我可以同时打开它们,并且我需要浏览器记住上一个活动手风琴或手风琴,当页面上的链接被点击时,直到下一个会话。但是,我需要手风琴开始崩溃。 这是我对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的链接 任何帮助?因为我无法弄清楚如何让所有的手风琴在最初的会议状态下折叠起来,而不是所有的手风琴都处于初始会话状态。
已邀请:

wet

赞同来自:

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

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