Я использую аккордеон 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);
});
Тогда работает только обратный вызов фундамента, а не переключение. Таким образом, они оба работают индивидуально, но когда у меня есть оба в скрипте, работает только обратный вызов основы. Как я могу заставить их работать?