Question

我正在使用基础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);
});

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

Answer 1

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

＆lt; div data-options =“one_up：true;” data-section =“accordion”class =“section-container accordion”＆gt;＆lt; / div＆gt;

Jquery和Foundation 4手风琴深度链接

1 个答案: