Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2011
    Messaggi
    10

    [jQuery] slidetoggle, DOM, uso di this e next()

    Ciao a tutti, ho la necessità di creare una pagina con varie sezioni che si possano aprire a tendina verticalmente cliccando su titolo (tipo menù). Essendo le sezioni ed il contenuto variabile non mi vengono in aiuto ne il classico javascript, ne i CSS3. Sto quindi approcciando al jQuery e seguendo un po di guide ed esempi ho strutturato il codice nel seguente modo(semplificato all'osso):

    HTML:
    codice:
    <div id="contenitore">
    Titolo1
    <div class="box">Contenuto 1</div>
    Titolo2
    <div class="box">Contenuto 2</div>
    Titolo3
    <div class="box">Contenuto 3</div>
    </div>
    jQuery:
    codice:
    function slide() {
    	$(this).next(".box").slideToggle("slow");
    }
    next() sembrava proprio le funzione per me, essendo il numero dei box dinamici, la mia logica era quella di applicare la funzione all'elemento .box successivo al link (o quel che sia) del titolo a cui clicco, senza impicci di cicli e contatori. Penso che il problema sia, sia il $(this) che non è riconosciuto come il link da cui è lanciato, che il next(".box") che prende tutti i div. Il tutto probabilmente sarebbe risolvibile con cicli e contatori, ma a me piacciono le soluzioni semplici e leggere se possibile... è possibile? dov'è che sbaglio?
    Mi rifaccio alla vostra saggezza XD

    Grazie!

    p.s. ho provato miriadi di combinazioni diverse, cercato su internet e dato un occhioata alla documentazione.. ma non ho trovato(/capito?) quello che cercavo :/

  2. #2
    Utente di HTML.it
    Registrato dal
    Dec 2011
    Messaggi
    10
    Dopo un po' di smanettamenti ho risolto!

    JS:
    codice:
    $(document).ready(function(){
    	
    	//$(".container").hide();
    
    	$("h2.test").css("cursor","pointer");
    	
    	$("h2.test").click(function(){
    		$(this).next(".box").slideToggle();
    	});
    
    });
    HTML:
    codice:
    <div id="contenitore">
    <h2 class="test">Titolo1</h2>
    <div class="box">Contenuto1</div>
    <h2 class="test">Titolo2</h2>
    <div class="box">Contenuto2</div>
    <h2 class="test">Titolo3</h2>
    <div class="box">Contenuto3</div>
    </div>
    Ho sostituito a <a> un <h2> che ho reso cliccabile col jQuery e ho attivato la funzione direttamente da li (così non ci sono problemi di interpretazione di $(this)!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.