[英]Jquery and Foundation 4 Accordion Deep Linking
I'm using Foundation 4 accordion with deep linking set to true: 我使用的是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">...
Despite Foundation docs saying this should work, this by itself does nothing... so I added: 尽管Foundation的文档说这应该可行,但它本身没有任何作用...所以我补充道:
$(document).foundation('section', {
callback: function (){
var containerPos = $('.active').offset().top;
$('html, body').animate({ scrollTop: containerPos }, 200);
}
});
This works, but I wanted the accordion panels to close when clicked again, instead of having to click another panel. 这可行,但是我希望在再次单击时关闭手风琴面板,而不必单击另一个面板。 So I then add some code to toggle open/close each accordion panel and arrow up/down on click:
因此,然后我添加一些代码来切换打开/关闭每个手风琴面板,并在单击时向上/向下箭头切换:
$(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);
});
Then only only the foundation callback works, not the toggling. 然后,仅基础回调起作用,而不起作用。 So these both work individually, but when I have both in the script only the foundation callback works.
因此,它们都可以单独工作,但是当我在脚本中同时拥有这两者时,仅基础回调起作用。 How can I get both of these to work?
我怎样才能使它们同时工作?
You can use data-options="one_up: true;" 您可以使用data-options =“ one_up:true;” to collapse the content of you accordion.
折叠您手风琴的内容。 For example:
例如:
<div data-options="one_up: true;"
<div data-options =“ one_up:true;” data-section="accordion" class="section-container accordion"></div>
data-section =“ accordion” class =“ section-container手风琴”> </ div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.