javascript - Jquery 和 Foundation 4 Accordion 深度链接

Question

我正在使用 Foundation 4 Accordion ，并将深度链接设置为 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);
    }
  });

这可行，但我希望再次单击时关闭 Accordion 面板，而不必单击另一个面板。因此，我然后添加一些代码来切换打开/关闭每个 Accordion 面板以及单击时向上/向下箭头:

$(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);
});

然后只有基础回调起作用，而切换不起作用。因此，这两者都是单独工作的，但是当我在脚本中同时使用两者时，只有基础回调起作用。我怎样才能让这两个都工作？

Answer 1

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

<div data-options="one_up: true;" data-section="accordion" class="section-container accordion"></div>