1

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

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

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

4

1 回答 1

0

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

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

于 2014-03-25T09:40:19.720 回答