Question

我已经阅读了有关JQuery手风琴的100个不同帖子，但似乎没有一个我认为是一个超级简单的任务。

我的简化手风琴如下：

Panel 1
  Section 1.1
  Section 1.2

Panel 2
  Section 2.1
  <link back to Panel 1, Section 1.2>

我希望关闭面板2，打开面板1并滚动到第1.2节。我尝试过使用基本的#anchors进行链接，但链接要么不开火，要么他们这样做，他们会刷新整个页面。我只想在1个手风琴中从面板到面板进行链接。最终用途是一个常见问题解答，其中链接是影响的结果（另见：第1小组的blah blah）。

标记：

<div id="accordion" class="accordion">
   <h1>Panel 1</h1>
   <div>
      <h3>Section 1.1</h3>
    <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur     malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
   <h3>Section 1.2</h3>
    <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>

   </div>
   <h1>Panel 2</h1>
   <div>
      <h3>Section 2.1</h3>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
      <p><a href="">LINK BACK TO PANEL 1 - SECTION 2 - should collapse Panel 2, open Panel 1, scroll to  Section 2</a></p>
   </div>
   </div>

Jquery（1.9.1）：

 $(function() {
    $( "#accordion" ).accordion({
      heightStyle: "content",
      active: false,
      collapsible: true 
    });
  });

链接到JSFiddle - http://jsfiddle.net/freemars/L2Wy7/1/

Answer 1

这是使用“有效”选项的FIDDLE。

JS

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

$( '#clickme' ).on('click', function(){
    $( "#accordion" ).accordion( "option", "active", 0 );
});

JQuery Accordion - 从面板到面板的链接

1 个答案: