Foundation 6 Multiple Accordions,如何一次只扩展一个手风琴
Foundation 6 Multiple Accordions, how to have only one accordion expanded at once
我正在使用 Foundation 6 的 Accordion 功能,并且在一页上有三个独立的手风琴。默认情况下,在单个手风琴中,一次只能展开一个内容。但是,我想一次只打开一个内容,用于整个页面上的所有手风琴。
我很确定我可以使用他们的方法来完成此操作,特别是 "Up" 方法,但是我找不到任何可用的示例,而且他们的文档也很少。这就是他们提供的全部内容:
up
$('#element').foundation('up', $target);
Closes the tab defined by $target.
http://foundation.zurb.com/sites/docs/accordion.html
我不太确定从这里到哪里去..到目前为止,这是我所拥有的:
JS:
$(".accordion-title").click(function(e) {
//Not sure what to do with this
$('#element').foundation('up', $target);
});
HAML:
%ul.accordion#accordion-1{:'data-accordion' => "", :'data-allow-all-closed' => "true"}
%li.accordion-item
%a.accordion-title
Title 1
.accordion-content{:'data-tab-content' => ""}
Content 1
%li.accordion-item
%a.accordion-title
Title 2
.accordion-content{:'data-tab-content' => ""}
Content 2
%ul.accordion#accordion-2{:'data-accordion' => "", :'data-allow-all-closed' => "true"}
%li.accordion-item
%a.accordion-title
Title 1
.accordion-content{:'data-tab-content' => ""}
Content 1
%li.accordion-item
%a.accordion-title
Title 2
.accordion-content{:'data-tab-content' => ""}
Content 2
%ul.accordion#accordion-3{:'data-accordion' => "", :'data-allow-all-closed' => "true"}
%li.accordion-item
%a.accordion-title
Title 1
.accordion-content{:'data-tab-content' => ""}
Content 1
%li.accordion-item
%a.accordion-title
Title 2
.accordion-content{:'data-tab-content' => ""}
Content 2
我找到了我的问题的解决方案,以防其他人遇到困难:
$(".accordion-title").click(function(e) {
$('.accordion').foundation('up', $('.accordion .accordion-item.is-active .accordion-content'));
});
我无法让 alexandraleigh 的答案起作用,它也在关闭我刚刚单击打开的手风琴。
下面是我最后写的。它适用于设置为 data-multi-expand="true"
或 data-multi-expand="false"
的手风琴
/**
* on accordion section click
*/
$('.accordion-title').on('mouseup', function (e) {
var $accordionItem = $(this).parent(),
//is the section hidden? if the section is not yet visible, the click is to open it
opening = ($accordionItem.find('.accordion-content:hidden').length === 1);
//
if (opening) {
//the accordion that has just been clicked
var $currentAccordion = $accordionItem.parent();
//close all other accodions
$('.accordion').each(function () {
var $acc = $(this);
//ignore the accordion that was just clicked
if ($acc[0] !== $currentAccordion[0]) {
//find any open sections
var $openSections = $acc.find('.accordion-item.is-active .accordion-content');
//
$openSections.each(function (i, section) {
//close them
$acc.foundation('up', $(section));
});
}
});
}
});
我无法得到 r8n5n 的答案 - 可能是因为基金会的更新。但我设法让它在 v6.3.0 上使用以下内容..
jQuery('.accordion-title').on('mouseup', function (e) {
jQuery('.accordion').each(function () {
jQuery(this).foundation('up', jQuery('.accordion-content'));
});
});
我对之前的答案有一些想法
如果您有 2 个手风琴,只需为它们添加 classname。例如 class="accordion accordion-first" 和 class="accordion accordion-second".
//close active item on second accordion when click on first accordion
$(".accordion-first .accordion-title").click(function(e) {
$('.accordion').foundation('up', $('.accordion-second .accordion-item.is-active .accordion-content'));
});
//close active item on first accordion when click on second accordion
$(".accordion-second .accordion-title").click(function(e) {
$('.accordion').foundation('up', $('.accordion-first .accordion-item.is-active .accordion-content'));
});
我正在使用 Foundation 6 的 Accordion 功能,并且在一页上有三个独立的手风琴。默认情况下,在单个手风琴中,一次只能展开一个内容。但是,我想一次只打开一个内容,用于整个页面上的所有手风琴。
我很确定我可以使用他们的方法来完成此操作,特别是 "Up" 方法,但是我找不到任何可用的示例,而且他们的文档也很少。这就是他们提供的全部内容:
up
$('#element').foundation('up', $target);
Closes the tab defined by $target.
http://foundation.zurb.com/sites/docs/accordion.html
我不太确定从这里到哪里去..到目前为止,这是我所拥有的:
JS:
$(".accordion-title").click(function(e) {
//Not sure what to do with this
$('#element').foundation('up', $target);
});
HAML:
%ul.accordion#accordion-1{:'data-accordion' => "", :'data-allow-all-closed' => "true"}
%li.accordion-item
%a.accordion-title
Title 1
.accordion-content{:'data-tab-content' => ""}
Content 1
%li.accordion-item
%a.accordion-title
Title 2
.accordion-content{:'data-tab-content' => ""}
Content 2
%ul.accordion#accordion-2{:'data-accordion' => "", :'data-allow-all-closed' => "true"}
%li.accordion-item
%a.accordion-title
Title 1
.accordion-content{:'data-tab-content' => ""}
Content 1
%li.accordion-item
%a.accordion-title
Title 2
.accordion-content{:'data-tab-content' => ""}
Content 2
%ul.accordion#accordion-3{:'data-accordion' => "", :'data-allow-all-closed' => "true"}
%li.accordion-item
%a.accordion-title
Title 1
.accordion-content{:'data-tab-content' => ""}
Content 1
%li.accordion-item
%a.accordion-title
Title 2
.accordion-content{:'data-tab-content' => ""}
Content 2
我找到了我的问题的解决方案,以防其他人遇到困难:
$(".accordion-title").click(function(e) {
$('.accordion').foundation('up', $('.accordion .accordion-item.is-active .accordion-content'));
});
我无法让 alexandraleigh 的答案起作用,它也在关闭我刚刚单击打开的手风琴。
下面是我最后写的。它适用于设置为 data-multi-expand="true"
或 data-multi-expand="false"
/**
* on accordion section click
*/
$('.accordion-title').on('mouseup', function (e) {
var $accordionItem = $(this).parent(),
//is the section hidden? if the section is not yet visible, the click is to open it
opening = ($accordionItem.find('.accordion-content:hidden').length === 1);
//
if (opening) {
//the accordion that has just been clicked
var $currentAccordion = $accordionItem.parent();
//close all other accodions
$('.accordion').each(function () {
var $acc = $(this);
//ignore the accordion that was just clicked
if ($acc[0] !== $currentAccordion[0]) {
//find any open sections
var $openSections = $acc.find('.accordion-item.is-active .accordion-content');
//
$openSections.each(function (i, section) {
//close them
$acc.foundation('up', $(section));
});
}
});
}
});
我无法得到 r8n5n 的答案 - 可能是因为基金会的更新。但我设法让它在 v6.3.0 上使用以下内容..
jQuery('.accordion-title').on('mouseup', function (e) {
jQuery('.accordion').each(function () {
jQuery(this).foundation('up', jQuery('.accordion-content'));
});
});
我对之前的答案有一些想法
如果您有 2 个手风琴,只需为它们添加 classname。例如 class="accordion accordion-first" 和 class="accordion accordion-second".
//close active item on second accordion when click on first accordion
$(".accordion-first .accordion-title").click(function(e) {
$('.accordion').foundation('up', $('.accordion-second .accordion-item.is-active .accordion-content'));
});
//close active item on first accordion when click on second accordion
$(".accordion-second .accordion-title").click(function(e) {
$('.accordion').foundation('up', $('.accordion-first .accordion-item.is-active .accordion-content'));
});