Глубинное связывание JQuery и Foundation 4 Accordion

Я использую аккордеон 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);
});

Тогда работает только обратный вызов фундамента, а не переключение. Таким образом, они оба работают индивидуально, но когда у меня есть оба в скрипте, работает только обратный вызов основы. Как я могу заставить их работать?


person suncoastkid    schedule 17.09.2013    source источник


Ответы (1)


Вы можете использовать data-options = "one_up: true;", чтобы свернуть содержимое вашего аккордеона. Например:

‹Div data-options =" ​​one_up: true; " data-section = "accordion" class = "section-container accordion" ›‹/div›

person Vijay Pawar    schedule 25.03.2014