jquery - Divisione collasso/espansione?

Provare a creare div espandibili/espandibili usando jQuery, ma non funziona affatto per me ... Ogni h3 dovrebbe espandere/comprimere il div al di sotto di esso, e non sono sicuro del motivo per cui questo non funziona ... Concesso , è un div pesantemente nidificato, ma ho pensato che la sceneggiatura di sotto avrebbe trovato la classe uforms indipendentemente dalla quantità di altri markup è sulla pagina quando viene caricato e poi fare quello che si suppone di fare ...jquery - Divisione collasso/espansione?

Ecco jQuery:

$(document).ready(function() { 
     $('div.uforms:eq(1)> div:gt(-1)').hide(); 
     $('div.uforms:eq(1)> h3').click(function() { 
       $(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast'); 
     }); 
});

E, il markup (meno tutte le cose che in realtà all'interno del <div></div>, perché è un sacco di roba forma ...)

<div class="uforms"> 
    <h3>Heading</h3> 
    <div></div> 

    <h3>Heading</h3> 
    <div></div> 

    <h3>Heading</h3> 
    <div></div> 
</div>

fonte

2009-10-12 n00b0101

Qual è il punto di: gt (-1) e quali sono le vostre intenzioni con: eq (1)? Strano vederlo. – Ricky

penso this è quello che si sta cercando di achive

Consiglio vivamente il quadro jQueryUI.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Accordion - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#accordion").accordion(); 
    }); 
    </script> 
</head> 
<body> 

<div id="accordion"> 
    <h3>Section 1</h3> 
    <div> 
    <p> 
    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. 
    </p> 
    </div> 
    <h3>Section 2</h3> 
    <div> 
    <p> 
    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. 
    </p> 
    </div> 
    <h3>Section 3</h3> 
    <div> 
    <p> 
    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. 
    </p> 
    <ul> 
     <li>List item one</li> 
     <li>List item two</li> 
     <li>List item three</li> 
    </ul> 
    </div> 
    <h3>Section 4</h3> 
    <div> 
    <p> 
    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. 
    </p> 
    <p> 
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. 
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
    inceptos himenaeos. 
    </p> 
    </div> 
</div> 


</body> 
</html>

fonte

2009-10-12 03:38:23

Concordato, nessun punto che reinventa la ruota, riutilizza solo qualcun altro;) – wiifm

+10

* Tranne * se non usi già jQueryUI, quindi stai aggiungendo un minimo di 32k (usando una build personalizzata) solo per un fisarmonica. –

I selettori sono semplicemente sbagliati. Non è necessario eq o gt

$(document).ready(function() { 
    $('.accordion > div').hide(); 
    $('.accordion> h3').click(function() { 
     $(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast'); 
    }); 
});

vorrei cambiare la classe identificata a qualcosa di più generale in modo da poter riutilizzare questo in altri posti.

<div class="accordion"> 
    <h3>Heading</h3> 
    <div>cactuspants! <div>I am an inner div</div></div> 

    <h3>Heading</h3> 
    <div>Hats</div> 

    <h3>Heading</h3> 
    <div>Hi!</div> 
</div>

Inoltre, altri hanno suggerito che è sufficiente utilizzare jQueryUI, che è del tutto valido, a meno che non si sta già usando o intenzione di usarlo per le funzionalità aggiuntive. Una funzione di linea s3 batte includendo una libreria 32K aggiuntiva (la dimensione dei componenti minimamente necessari in una build personalizzata).

fonte

2009-10-12 06:08:37

Io uso solo il widget della fisarmonica con un solo div all'interno.

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

<div id="accordion"> 
    <h3>Section 1</h3> 
    <div> 
    <p>test 1 2 3</p> 
    </div> 
</div>

Includere questo link css:

link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"

fonte

2013-08-26 20:07:21 twilliams

jquery - Divisione collasso/espansione?

risposta

Problemi correlati