Dopo eseguita la funzione non è più possibile cliccare
Taggato: jquery slideDown slideUp click
- Questo topic ha 2 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 11 anni, 4 mesi fa da Mraghe.
- AutorePost
- 10 Dicembre 2012 alle 19:14 #3845MraghePartecipante
Ciao a tutti,
ho un problema con questo script caricato su un sito wordpress. Brevemente, il codice mi permette di aprire e chiudere dei <dd> cliccando sopra i titoli <dt>, però una volta che ho richiuso il box il <dt> non risulta più cliccabile, o meglio appare la manina ma non succede nulla se lo si clicca e viene riattivato solo dopo aver cliccato su altri <dt>. Vi incollo il codice, non son molto esperto del linguaggio quindi l’ho elaborato prendendo spunto da un codice già esistente.jQuery(document).ready(function($) { // Set up variables var $el, $parentWrap, $otherWrap, $allTitles = $("dt").css({ padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5 "cursor": "pointer" // make it seem clickable }), $allCells = $("dd").css({ position: "relative", top: -1, left: 0, display: "none" // info cells are just kicked off the page with CSS (for accessibility) }); // clicking image of inactive column just opens column, doesn't go to link $("#mediasingle").delegate("a.image","click", function(e) { if ( !$(this).parent().hasClass("curCol") ) { e.preventDefault(); $(this).next().find('dt:first').click(); } }); // clicking on titles does stuff $("#mediasingle").delegate("dt", "click", function() { // cache this, as always, is good form $el = $(this); // if this is already the active cell, don't do anything if (!$el.hasClass("current")) { $parentWrap = $el.parent().parent(); $otherWraps = $(".photogalsingle").not($parentWrap); // remove current cell from selection of all cells $allTitles = $("dt").not(this); // close all info cells $allCells.slideUp(); // return all titles (except current one) to normal size $allTitles.animate({ fontSize: "14px", paddingTop: 5, paddingRight: 5, paddingBottom: 5, paddingLeft: 5 }); // animate current title to larger size $el.animate({ "font-size": "20px", paddingTop: 10, paddingRight: 0, paddingBottom: 10, paddingLeft: 17, }).next().slideDown(); // make the current column the large size $parentWrap.animate({ width: 300 }).addClass("curCol"); // make other columns the small size $otherWraps.animate({ width: 300 }).removeClass("curCol"); // make sure the correct column is current $allTitles.removeClass("current"); $el.addClass("current"); } else { $parentWrap = $el.parent().parent(); $otherWraps = $(".photogalsingle").not($parentWrap); // remove current cell from selection of all cells $allTitles = $("dt").not(this); // close all info cells $allCells.slideUp(); // return all titles (except current one) to normal size $allTitles.animate({ fontSize: "12px", paddingTop: 5, paddingRight: 5, paddingBottom: 5, paddingLeft: 5 }); // animate current title to larger size $el.animate({ "font-size": "12px", paddingTop: 5, paddingRight: 5, paddingBottom: 5, paddingLeft: 5, }).next().slideUp(); // make the current column the large size $parentWrap.animate({ width: 280, }).RemoveClass("current"); // make sure the correct column is current $allTitles.removeClass("curCol"); } }); $("#starter").trigger("click"); });
Grazie per l’attenzione e scusate la lunghezza del codice.
Ciao.10 Dicembre 2012 alle 22:24 #3850jqueryitaliaAmministratoreCiao Mraghe.
Se non sbaglio il codice che hai utilizzato è quello di InfoGrid ( http://css-tricks.com/examples/InfoGrid/ ) e non funziona in quanto hai eliminato parte del codice 😉
10 Dicembre 2012 alle 22:37 #3851MraghePartecipanteCiao jqueryitalia, grazie per la rapida risposta. Sì il codice è proprio quello di InfoGrid, c’hai visto giusto 🙂
In pratica ho aggiunto un else per permettere di avere la funzione di chiusura, però poi una volta chiuso, se clicco nuovamente non si apre, a meno che non apra un altro dd. Vabbé in realtà non è perfetto ma funziona. Volevo giusto sapere se avete un’idea del perché non funzioni.
Grazie ancora.
Ciao - AutorePost
- Devi essere connesso per rispondere a questo topic.