Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2008
    Messaggi
    5

    [JQuery] ( Toggle): Apertura di una DIV e chiusura dell'altra automaticamente (mantenendo next() come funzione)

    Ciao a tutti,

    Diciamo che sono appassionato moltissimo di linguaggi di programmazione (HTML, CSS, PHP e SQL praticamente sono una passeggiata per me), ma purtroppo il jQuery e il Javascript sono la mia rovina più assoluta, ma andiamo al sodo... praticamente volevo costruire un menù toggle dove ad esempio ho due DIV

    codice HTML:
    <!-- Primo menù -->
    <div class="pulsante">
      Pulsante 1
    </div>
       <div class="contenuto">
         Sono il numero uno
       </div>
    
    <!-- Secondo menù -->
    <div class="pulsante" style="display: none;">
      Pulsante 2
    </div>
       <div class="contenuto">
         Sono il numero due
       </div>
    
    <!-- Terzo menù -->
    <div class="pulsante" style="display: none;">
      Pulsante 3
    </div>
       <div class="contenuto">
         Sono il numero tre
       </div>
    Dove mi ritrovo DIV 1 già aperta e tutte le altre DIV chiuse.
    Se apro ad esempio la DIV 2 o la DIV 3, la precedente si chiuderà in automatico, e così alternativamente (in parole povere, ogni azione prevede che solo la DIV interessata si apre, mentre tutte le altre restano chiuse). Ho provato con questa sorgente:

    codice:
    $(document).ready(function(){
      $('div.pulsante').click(function(){
        $(this).next().slideToggle('slow')
          return false;
        });
    });
    Questo codice in effetti funziona perfettamente per quello che deve fare (apre/chiude la singola DIV), ma se volessi implementare anche la funzionalità di chiusura automatica della DIV precedentemente aperta?

    Il motivo del perché uso next() è perché sono menù che ho su svariate pagine (dove vorrei usare un unico file .js) e, praticamente, volevo evitare di assegnare ID ad ogni singolo box.
    Ultima modifica di Kikko90; 09-01-2016 a 10:21

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Prova cosi:
    codice:
    $(document).ready(function(){
      $('div.pulsante').click(function(){
    $('div.pulsante').slideToggle('slow')
        $(this).next().slideToggle('slow')
        });
    });
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2008
    Messaggi
    5
    Non va...

    https://jsfiddle.net/Gioser/sedso0ch


    Questo è il mio attuale script

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    http://webandylab.altervista.org/menu-slide.html

    codice:
    $(document).ready(function(){
      $('div.pulsante').click(function(){
    $('div.contenuto').slideUp('fast')
        $(this).next().slideToggle('fast')
        });
    });
    Cosi funziona (il return false in questo contesto è inutile)
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Utente di HTML.it
    Registrato dal
    Dec 2008
    Messaggi
    5

    Risolto

    Grande!
    Ti ringrazio!
    Gentilissimo!
    Sperando che questo thread possa essere sempre utile a chi dovesse cercare questa soluzione!

    Buona giornata!

Tag per questa discussione

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.