Foundation 6 Multiple Akkordeons, wie man nur ein Akkordeon auf einmal erweitern kann - zurb-foundation, Akkordeon, zurb-foundation-6

Ich verwende die Akkordeon-Funktion von Foundation 6 undhabe drei separate Akkordeons auf einer Seite. Standardmäßig können Sie in einem Akkordeon jeweils nur einen Inhalt erweitern. Ich möchte jedoch nur einen einzigen Inhalt für alle Akkordeons auf der ganzen Seite öffnen.

Ich bin mir ziemlich sicher, dass ich das mit ihren Methoden erreichen kann, speziell mit der "Up" -Methode, aber ich finde keine Arbeitsbeispiele und ihre Dokumentation ist ziemlich spärlich.

up

$("#element").foundation("up", $target);

Closes the tab defined by $target.

http://foundation.zurb.com/sites/docs/accordion.html

Ich bin mir nicht sicher, wohin ich von hier aus gehen soll. Bisher habe ich Folgendes:

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

Antworten:

1 für die Antwort № 1

Ich konnte alexandraleighs Antwort nicht zur Arbeit bringen, es schloss auch das Akkordeon, das ich gerade geklickt hatte, um es zu öffnen.

Folgendes habe ich am Ende geschrieben. Es funktioniert mit Akkordeons, die mit beiden eingestellt sind data-multi-expand="true" oder 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));
});
}
});
}
});

3 für die Antwort № 2

Ich habe die Lösung für meine Frage gefunden, falls jemand anderes festsitzt:

$(".accordion-title").click(function(e) {
$(".accordion").foundation("up", $(".accordion .accordion-item.is-active .accordion-content"));
});

1 für die Antwort № 3

Ich konnte die Antwort von r8n5n nicht bekommen - vielleicht wegen der Updates der Foundation seit dem. Aber ich habe es geschafft, mit dem folgenden auf v6.3.0 zu arbeiten.

jQuery(".accordion-title").on("mouseup", function (e) {

jQuery(".accordion").each(function () {

jQuery(this).foundation("up", jQuery(".accordion-content"));

});
});