jQuery UI fisarmonica che mantiene aperte più sezioni?


93

Potrei essere un idiota, ma come fai a mantenere aperte più sezioni nella fisarmonica dell'interfaccia utente di jQuery? Le demo hanno tutte solo una aperta alla volta ... Sto cercando un sistema di tipi di menu comprimibile.


18
Guarda questo jsfiddle.net/DkHyd
supersuphot

Bene, il tuo plugin è semplicemente perfetto! Grazie mille, amico!
SexyBeast

Risposte:


94

Questo è stato originariamente discusso nella documentazione dell'interfaccia utente jQuery per Accordion :

NOTA: se desideri aprire più sezioni contemporaneamente, non utilizzare una fisarmonica

Una fisarmonica non consente di aprire più di un pannello di contenuti contemporaneamente e richiede molto impegno per farlo. Se stai cercando un widget che consenta di aprire più di un pannello dei contenuti, non utilizzarlo. Di solito può essere scritto con poche righe di jQuery, qualcosa del genere:

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
      $(this).next().toggle();
      return false;
  }).next().hide();
});

O animato:

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
      $(this).next().toggle('slow');
      return false;
  }).next().hide();
});

"Potrei essere un idiota" - Non sei un idiota se non leggi la documentazione, ma se hai problemi, di solito velocizza la ricerca di una soluzione.


9
Questa soluzione non fa nulla dello styling della fisarmonica.
forresto

12
Inoltre, questa non è affatto una soluzione alla domanda. Il documento della fisarmonica e l'elenco di opzioni, eventi, ecc. Sono semplicemente scadenti. E invece di dire all'utente "se non abbiamo le opzioni per te, non usarlo!" dovrebbero dire "mi dispiace che non ci sia ancora alcuna opzione per questo, ma diamo il benvenuto a tutti i contributori che aggiungono funzionalità al nostro fantastico plugin"
artgrohe

Il testo che ho citato è stato rimosso dalla documentazione. Ho aggiunto un collegamento a una versione archiviata.
MvanGeest

1
Tieni presente che jQuery UI Accordion fa molto di più che creare l'effettivo effetto fisarmonica. Aggiunge anche molti markup di accessibilità per gli screen reader.
Brian

2
Questo non ha alcun senso. Una fisarmonica può avere tutte le pieghe aperte se le braccia del musicista sono lontane, tutte le pieghe chiuse se le metà dello strumento sono insieme, o qualcosa nel mezzo. Se le parole significano qualcosa, il controllo dell'interfaccia utente del software a fisarmonica dovrebbe consentire qualsiasi combinazione di pannelli aperti e chiusi.
birdus

119

Abbastanza semplice:

<script type="text/javascript">
    (function($) {
        $(function() {
            $("#accordion > div").accordion({ header: "h3", collapsible: true });
        })
    })(jQuery);
</script>

<div id="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>

1
Ha funzionato alla grande. Ho aggiunto create: function(event) { $(event.target).accordion( "activate", false ); }per iniziare crollato.
forresto

2
Eccezionale. Sono contento che abbia funzionato per te. :) Mi piace mantenere le cose il più semplici possibile.
2upmedia

7
in jquery-ui 1.10, per iniziare collassato, invece di create: function(event) { $(event.target).accordion( "activate", false ); }impostare l'opzione:{active: false}
damko

16
(facepalm) fisarmonica separata per ogni blocco.
Paul Annekov

2
Ecco il jsFiddle che ho usato per testarlo jsfiddle.net/txo8rx3q/1 Ho anche aggiunto un po 'di CSS per impedire a una sezione di fisarmonica aperta di sembrare selezionata quando è espansa
Matthew Lock

77

Inserito questo in un thread simile, ma ho pensato che potrebbe essere rilevante anche qui.

Raggiungere questo obiettivo con una singola istanza di jQuery-UI Accordion

Come altri hanno notato, il Accordionwidget non ha un'opzione API per farlo direttamente. Tuttavia, se per qualche motivo devi utilizzare il widget (ad es. Stai mantenendo un sistema esistente), è possibile ottenere ciò utilizzando ilbeforeActivate opzione del gestore di eventi per sovvertire ed emulare il comportamento predefinito del widget.

Per esempio:

$('#accordion').accordion({
    collapsible:true,

    beforeActivate: function(event, ui) {
         // The accordion believes a panel is being opened
        if (ui.newHeader[0]) {
            var currHeader  = ui.newHeader;
            var currContent = currHeader.next('.ui-accordion-content');
         // The accordion believes a panel is being closed
        } else {
            var currHeader  = ui.oldHeader;
            var currContent = currHeader.next('.ui-accordion-content');
        }
         // Since we've changed the default behavior, this detects the actual status
        var isPanelSelected = currHeader.attr('aria-selected') == 'true';

         // Toggle the panel's header
        currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

        // Toggle the panel's icon
        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

         // Toggle the panel's content
        currContent.toggleClass('accordion-content-active',!isPanelSelected)    
        if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

        return false; // Cancels the default action
    }
});

Guarda una demo di jsFiddle


6
Grazie! Questa è la soluzione migliore poiché non è necessario alcun cambiamento in tutto l'ambiente esistente.
artgrohe

Richiede jQuery UI 1.9.0+ (Drupal 7 è bloccato con 1.8.7)
Capi Etheriel

1
Credo che la classe attiva sia cambiataui-accordion-header-active
Tim Vermaelen

ha funzionato alla grande per me, quantità minima di refactoring :-)
Darkloki

buona soluzione, l'unico problema è che questa soluzione non
accetta l'

20

O anche più semplice?

<div class="accordion">
    <h3><a href="#">First</a></h3>
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>    
<div class="accordion">
    <h3><a href="#">Second</a></h3>
    <div>Phasellus mattis tincidunt nibh.</div>
</div>         
<div class="accordion">
    <h3><a href="#">Third</a></h3>
    <div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<script type="text/javascript">
    $(".accordion").accordion({ collapsible: true, active: false });
</script>

Questo è bello imho. Soluzione semplice e ha risolto i problemi che stavo avendo con l'esecuzione di grandi set di elementi per fisarmonica. Sorprendentemente, l'inizializzazione di un ampio set di fisarmoniche si comporta bene. Grazie!
Noviziato Codice

14

Ho creato un plugin jQuery che ha lo stesso aspetto di jQuery UI Accordion e posso tenere aperte tutte le schede \ sezioni

Potete trovare qui

http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

funziona con lo stesso markup

<div id="multiOpenAccordion">
        <h3><a href="#">tab 1</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
        <h3><a href="#">tab 2</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
</div>

Codice Javascript

$(function(){
        $('#multiOpenAccordion').multiAccordion();
       // you can use a number or an array with active option to specify which tabs to be opened by default:
       $('#multiOpenAccordion').multiAccordion({ active: 1 });
       // OR
       $('#multiOpenAccordion').multiAccordion({ active: [1, 2, 3] });

       $('#multiOpenAccordion').multiAccordion({ active: false }); // no opened tabs
});

AGGIORNAMENTO: il plugin è stato aggiornato per supportare l'opzione predefinita delle schede attive

AGGIORNAMENTO: questo plugin è ora deprecato.


Ottima soluzione in assoluto.
Soluzione software Trimantra

6

In realtà stava cercando su Internet una soluzione a questo per un po '. E la risposta accettata dà la buona risposta "da manuale". Ma non volevo accettarlo, quindi ho continuato a cercare e ho trovato questo:

http://jsbin.com/eqape/1601/edit - Esempio dal vivo

Questo esempio inserisce gli stili corretti e aggiunge la funzionalità richiesta allo stesso tempo, completa di spazio per scrivere, aggiungi la tua funzionalità ad ogni clic sull'intestazione. Consente inoltre di inserire più div tra gli "h3".

 $("#notaccordion").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
  .find("h3")
    .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
    .hover(function() { $(this).toggleClass("ui-state-hover"); })
    .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
    .click(function() {
      $(this).find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()


        .next().toggleClass("ui-accordion-content-active").slideToggle();
        return false;
    })
    .next()
      .addClass("ui-accordion-content  ui-helper-reset ui-widget-content ui-corner-bottom")
      .hide();

Codice HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toggle Panels (not accordion) using ui-accordion  styles</title>

<!-- jQuery UI  |  http://jquery.com/  http://jqueryui.com/  http://jqueryui.com/docs/Theming  -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>


</head>
<body>

<h1>Toggle Panels</h1>
<div id="notaccordion">
  <h3><a href="#">Section 1</a></h3>
  <div class="content">
    Mauris mauris  ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus  nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a  nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur  malesuada. Vestibulum a velit eu ante scelerisque vulputate.
  </div>
  <h3><a href="#">Section 2</a></h3>
  <div>
    Sed non urna. Donec et ante. Phasellus eu ligula.  Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet,  mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo.  Vivamus non quam. In
    suscipit faucibus urna.
  </div>
  <h3><a href="#">Section 3</a></h3>
  <div class="top">
  Top top top top
  </div>
  <div class="content">
    Nam enim risus, molestie et, porta ac, aliquam ac,  risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede.  Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed  commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo  purus venenatis dui.
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item  three</li>
    </ul>
  </div>
  <div class="bottom">
  Bottom bottom bottom bottom
  </div>
  <h3><a href="#">Section 4</a></h3>
  <div>
    Cras dictum. Pellentesque habitant morbi tristique  senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante  ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae;  Aenean lacinia
    mauris vel est.
    Suspendisse eu nisl. Nullam ut libero. Integer  dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per  conubia nostra, per
    inceptos himenaeos.
  </div>
</div>

</body>
</html>`

5

Ho trovato una soluzione complicata. Chiamiamo due volte la stessa funzione ma con un id diverso.

Codice JQuery

$(function() {
    $( "#accordion1" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
    $( "#accordion2" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
});

Codice HTML

<div id="accordion1">
    <h3>Section 1</h3>
    <div>Section one Text</div>
</div>
<div id="accordion2">   
    <h3>Section 2</h3>
    <div>Section two Text</div>
</div>

2
È meglio che tu vada con un singolo selettore basato su classcome suggerito da altri, questo significa che non ti ripeti ( DRY )
Scotty.NET

4

Semplice, crea più div accordian ciascuno che rappresenta un tag di ancoraggio come:

<div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
</div>

Aggiunge un po 'di markup. Ma funziona come un professionista ...


4

Semplice: attiva la fisarmonica in una classe, quindi crea div con questo, come istanze multiple di fisarmonica.

Come questo:

JS

$(function() {
    $( ".accordion" ).accordion({
        collapsible: true,
        clearStyle: true,
        active: false,
    })
});

HTML

<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>
<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>
<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>

https://jsfiddle.net/sparhawk_odin/pm91whz3/


1
Ho provato tutte le risposte nel thread e questo funziona al meglio. Con le ultime jquery e jqueryUI ora ci sono molti problemi di stile con altre soluzioni. Ecco l'aggiornamento del 2017 jsfiddle.net/rambutan2000/eqbbgb7g
Geordie

@Geordie sono contento che abbia aiutato.
Giovan Cruz

2

Basta chiamare ogni sezione della fisarmonica come la propria fisarmonica. attivo: n sarà 0 per il primo (quindi verrà visualizzato) e 1, 2, 3, 4, ecc per il resto. Poiché ognuno è la sua fisarmonica, avranno tutti solo 1 sezione e il resto verrà compresso per iniziare.

$('.accordian').each(function(n, el) {
  $(el).accordion({
    heightStyle: 'content',
    collapsible: true,
    active: n
  });
});

Nota che questo è già stato suggerito nella risposta di 2upmedia di seguito
Boaz

2

Ancora più semplice, etichettarlo nell'attributo class di ogni tag li e fare in modo che jquery esegua un ciclo attraverso ogni li per inizializzare la fisarmonica.


1

Senza jQuery-UI fisarmonica, si può semplicemente fare questo:

<div class="section">
  <div class="section-title">
    Section 1
  </div>
  <div class="section-content">
    Section 1 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="section">
  <div class="section-title">
    Section 2
  </div>
  <div class="section-content">
    Section 2 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

E js

$( ".section-title" ).click(function() {
    $(this).parent().find( ".section-content" ).slideToggle();
});

https://jsfiddle.net/gayan_dasanayake/6ogxL7nm/


0

apri jquery-ui - *. js

trova $.widget( "ui.accordion", {

trova _eventHandler: function( event ) { dentro

modificare

var options = this.options,             active = this.active,           clicked = $( event.currentTarget ),             clickedIsActive = clicked[ 0 ] === active[ 0 ],             collapsing = clickedIsActive && options.collapsible,            toShow = collapsing ? $() : clicked.next(),             toHide = active.next(),             eventData = {
                oldHeader: active,
                oldPanel: toHide,
                newHeader: collapsing ? $() : clicked,
                newPanel: toShow            };

per

var options = this.options,
    clicked = $( event.currentTarget),
    clickedIsActive = clicked.next().attr('aria-expanded') == 'true',
    collapsing = clickedIsActive && options.collapsible;

    if (clickedIsActive == true) {
        var toShow = $();
        var toHide = clicked.next();
    } else {
        var toShow = clicked.next();
        var toHide = $();

    }
    eventData = {
        oldHeader: $(),
        oldPanel: toHide,
        newHeader: clicked,
        newPanel: toShow
    };

prima active.removeClass( "ui-accordion-header-active ui-state-active" );

Inserisci if (typeof(active) !== 'undefined') { e chiudi}

godere


-1

Devi solo usare la funzione jquery each ();

$(function() {
    $( ".selector_class_name" ).each(function(){
        $( this ).accordion({
          collapsible: true, 
          active:false,
          heightStyle: "content"
        });
    });
});
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.