Jquery 和 Foundation 4 手风琴深度链接

Posted 2023-05-08

【中文标题】Jquery 和 Foundation 4 手风琴深度链接

【英文标题】：Jquery and Foundation 4 Accordion Deep Linking

【发布时间】：2013-09-21 22:16:50

【问题描述】：

我正在使用 Foundation 4 手风琴，并将深度链接设置为 true：

<div class="section-container accordion" data-section="accordion" data-options="deep_linking: true">
      <section class="section">
        <h3 class="title"> <a href="#panel1">Program Highlights <span class="arrow_down"></span></a></h3>
        <div class="content" data-slug="panel1">...

尽管基金会文档说这应该可行，但这本身并没有任何作用......所以我补充说：

$(document).foundation('section', 
    callback: function ()
    var containerPos = $('.active').offset().top;
   $('html, body').animate( scrollTop: containerPos , 200);
    
  );

这可行，但我希望在再次单击时关闭手风琴面板，而不必单击另一个面板。所以我然后添加一些代码来切换打开/关闭每个手风琴面板和单击时向上/向下箭头：

$(document).on('click','.accordion h3', function () 
    $(this).find('span').toggleClass("arrow_down arrow_up");
    $(this).next('div').toggle();
    var containerPos =  $(this).offset().top;
    $('html, body').animate( scrollTop: containerPos , 200);
);

那么只有基础回调起作用，而不是切换。所以这两个都单独工作，但是当我在脚本中都有这两个时，只有基础回调工作。我怎样才能让这两个都起作用？

【参考方案1】：

您可以使用 data-options="one_up: true;" 折叠手风琴的内容。例如：