Problemi con accordion
- Questo topic ha 3 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 11 anni, 5 mesi fa da jqueryitalia.
- AutorePost
- 20 Novembre 2012 alle 09:25 #3752tula82Partecipante
Buongiorno a tutti,
ho iniziato da poco a “lavorare” con Jquery. Sto implemendando accordion sul mio sito ma ho un problema di sfarfallio durante l’apertura / chiusura delle tab. Avvolte chiudendo una scheda, durante la chiusura, si apre/chiude velocemente.jquery-ui-1.9.1.custom.css
jquery-1.8.2.js
jquery-ui-1.9.1.custom.js
Qualche consiglio ? grazie
20 Novembre 2012 alle 13:19 #3753jqueryitaliaAmministratoreCiao tula82 e benvenuto!
Per avere qualche consiglio, bisognerebbe almeno vedere il codice 😉
20 Novembre 2012 alle 14:34 #3755tula82PartecipanteSi, scusa hai ragione 😉
Ecco una piccola parte di codice. Quello che mi serviva è un “accordion” :
– altezza delle “sezioni” automatiche
– chiudibile completamente
– tenere aperte più “sezioni” contemporaneamente e non chiudere una appena se ne apre un altra.
<html> <head> <link href="../ui/css/custom-theme/jquery-ui-1.9.1.custom.css" rel="stylesheet"> <script src="../ui/js/jquery-1.8.2.js"></script> <script src="../ui/js/jquery-ui-1.9.1.custom.js"></script> <script type="text/javascript"> $(function () { $("#accordion").accordion({ heightStyle: "content", collapsible: true }); }); </script> <body marginwidth="0" marginheight="0"> <h2 class="demoHeaders"></h2> <div id="accordion"> <h3>Scheda contatto</h3> <div> <table border="0" cellspacing="1" cellpadding="1" width="100%" align="center"> <tr> <td align="left"> <i>Nome:</i> </td> <td> Mario </td> </tr> <tr> <td align="left"> <i>Cognome</i> </td> <td> Rossi </td> </tr> </table> </div> <h3>Luogo</h3> <div>Il contatto abita in via Roma</div> <h3>Opzioni</h3> <div> <ul> <li>Opzione 1</li> <li>Opzione 2</li> </ul> </div> <h3>Azioni</h3> <div> Stampa - chiama </div> </div> </body> </html>
Grazie
22 Novembre 2012 alle 09:51 #3756jqueryitaliaAmministratoreSe vuoi tenere aperte più sezioni contemporaneamente senza che se ne chiuda una quando ne apri un’altra, non devi usare ‘Accordion‘ ma ‘Toogle‘.
In tal caso, se non vuoi effetti particolari, non servirebbe nemmeno utilizzare jQueryUI…
Ho comunque creato per te un codice di esempio, basandomi sul tuo:
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> <style type="text/css"> body {font-family:verdana;font-size:12px;} .title {cursor:pointer;} .details {display:none;} </style> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery.ui.base.css" rel="stylesheet"> <script type="text/javascript"> $(function () { $(".title").click( function() { $(this).next('div').toggle( 'blind', {}, 'fast' ); }) }); </script> </head> <body marginwidth="0" marginheight="0"> <div id="container"> <h2 class="title">Scheda contatto</h2> <div class="main"> <table border="0" cellspacing="1" cellpadding="1" width="50%"> <tr> <td align="left"> <i>Nome:</i> </td> <td> Mario </td> </tr> <tr> <td align="left"> <i>Cognome</i> </td> <td> Rossi </td> </tr> </table> </div> <h2 class="title">Luogo</h2> <div class="details">Il contatto abita in via Roma</div> <h2 class="title">Opzioni</h2> <div class="details"> <ul> <li>Opzione 1</li> <li>Opzione 2</li> </ul> </div> <h2 class="title">Azioni</h2> <div class="details"> Stampa - chiama </div> </div> </body> </html>
Buon lavoro!
- AutorePost
- Devi essere connesso per rispondere a questo topic.