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 に答える