Visualizzazione dei risultati da 1 a 9 su 9
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2010
    Messaggi
    77

    jquery mantenere show fino a click su altro

    ciao a tutti!
    ho un menu che con un semplice show mi mostra il submenu.
    ora con un click sulla voce del menu fa show e con un altro hide.

    vorrei che con un click su A mostrasse il submanu A e per cambiare basti cliccare direttamente su B, che prima di mostrare il submenu B chiude quello aperto in precedenza (A).

    grazie

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Ciao,
    in linea generale potresti fare in due modi:

    A) attraverso una variabile tieni traccia del menu aperto che poi, al click su un qualsiasi menu, vai a richiudere prima di aprire quello appena selezionato.

    B) al click su un qualsiasi menu applichi hide a tutti i menu per chiuderli (ovviamente si chiuderà giusto quello che era precedente aperto, mentre su quelli già chiusi non si vedrà nessun effetto) e quindi, con show, vai ad aprire quello appena selezionato.

    Per capire come intervenire nello specifico dovresti postare lo script interessato.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2010
    Messaggi
    77
    Grazie!
    avevo pensato anche io alla seconda opzione, ma facendo delle prove non funzionava.
    ora è un semplicissimo show/hide
    codice:
        $("#menu #A")
    	.click(
    	function () { $(".submenu#A").show("fast"); },
    	function () { $(".submenu#A").hide("fast"); }
    );

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Scusa l'eventuale ignoranza ma non capisco perche al click() hai assegnato le due funzioni in quel modo.. presumo tu volessi usare toggle(), no?

    Ad ogni modo potresti fare una cosa del genere:
    codice:
    $("#menu>div").click(function(){
      $(".submenu").stop(1,1).hide("fast");
      $(".submenu", this).stop(1).show("fast");
    });
    Ho usato questo selettore "#menu>div" supponendo che dentro il tuo #menu ci siano dei DIV (utilizzati come menu principali), ma potrebbe benissimo esserci una lista e quindi degli LI. Non ho idea di come tu abbia strutturato la parte html.

    Come esempio, potrebbe esserci una cosa del genere:
    codice:
    <div id="menu">
      <div id="A">menu A<div class="submenu">submenu A</div></div>
      <div id="B">menu B<div class="submenu">submenu B</div></div>
      <div id="C">menu C<div class="submenu">submenu C</div></div>
      <div id="D">menu D<div class="submenu">submenu D</div></div>
      <div id="E">menu E<div class="submenu">submenu E</div></div>
      <div id="F">menu F<div class="submenu">submenu F</div></div>
    </div>
    Nel jquery ho quindi assegnato l'evento click su ogni DIV che è figlio di #menu, in questo modo $("#menu>div").click(
    Non devi quindi attribuire il click singolarmente per ogni menu, come presumo tu abbia fatto con $("#menu #A")

    Dentro la funzione del click chiudo tutti i sottomenu $(".submenu").stop(1,1).hide("fast"); e quindi riapro giusto il sottomenu del menu cliccato $(".submenu", this).stop(1).show("fast");

    Nota il selettore this che ho usato per identificare solo il sottomenu contenuto nel DIV cliccato.

    Ho inoltre usato stop() per interrompere eventuali animazioni in corso ed evitare che si ripetano se si clicca più volte di seguito su uno stesso menu.
    Ovviamente questa è un'idea di base ma si può ottimizzare o fare in vari altri modi.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2010
    Messaggi
    77
    Grazie KillerWorm.
    Purtroppo il menu è strutturato diversamente.

    <div id="menu">
    <div id="A">menu A</div>
    <div id="B">menu B</div>
    <div id="C">menu C</div>
    <div id="D">menu D</div>
    <div id="E">menu E</div>
    <div id="F">menu F</div>
    </div>

    <div id="submenu">
    <div id="A"> submenu A</div>
    <div id="B"> submenu B</div>
    <div id="C"> submenu C</div>
    <div id="D"> submenu D</div>
    <div id="E"> submenu E</div>
    <div id="F"> submenu F</div>
    </div>

    grazie

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Capito, comunque il discorso non cambia molto.

    Perdonami ma continuo a non capire perché alla funzione click() passi le due funzioni in quel modo.

    Inoltre il tuo codice html, se lo hai scritto così nella pagina, ha un grosso errore di fondo.
    Non puoi dichiarare degli id uguali a più elementi all'interno della stessa pagina. Se il div dentro "menu" ha un id="A", non può esistere un'altro elemento che abbia un id con lo stesso valore, anche se si trova dentro un'altro div.

    Puoi risolvere comunque in tanti modi. Ad esempio per i sottomenu potresti sostituire gli id con delle classi:

    codice:
    <div id="menu">
    <div id="A">menu A</div>
    <div id="B">menu B</div>
    <div id="C">menu C</div>
    <div id="D">menu D</div>
    <div id="E">menu E</div>
    <div id="F">menu F</div>
    </div>
    
    <div id="submenu">
    <div class="A"> submenu A</div>
    <div class="B"> submenu B</div>
    <div class="C"> submenu C</div>
    <div class="D"> submenu D</div>
    <div class="E"> submenu E</div>
    <div class="F"> submenu F</div>
    </div>
    Quindi da jquery ricostruisci il nome della classe attraverso il valore id dell'elemento (menu) cliccato.

    codice:
    $("#menu>div").click(function(){
      $("#submenu>div").stop(1,1).hide("fast");
      $("#submenu ."+$(this).attr("id")).stop(1).show("fast");
    });
    Allo stesso modo puoi farlo sempre con degli id per i sottomenu ma costruendo il valore in modo che non sia uguale a quello dei menu (ad es: id="subA") e selezionare quindi i sottomenu sempre con la stessa logica.
    codice:
    $("#submenu #sub"+$(this).attr("id"))
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  7. #7
    Utente di HTML.it
    Registrato dal
    Feb 2010
    Messaggi
    77
    Scusa per il primo codice. era una delle tante prove e non ho controllato prima di copiarlo.

    Non mi funziona ancora.. forse ho sbagliato qualcosa nella "conversione"




    codice:
    $("#rectangle>a").click(function(){
      $(".catmenu #"+$(this).attr("id")).stop(1,1).hide("fast");
      $(".catmenu #"+$(this).attr("id")).stop(1).show("fast");
    });
    codice:
    <div id="rectangle">
    			A
    			B
    			C
    			D
    			E
    </div>
    codice:
    <div id="rectangle">
    			A
    			B
    			C
    			D
    			E
    </div>

    codice:
     
    <div class="catmenu" id="A"></div>
    <div class="catmenu" id="B"></div>
    <div class="catmenu" id="C"></div>
    <div class="catmenu" id="D"></div>
    <div class="catmenu" id="E"></div>

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,771
    Perdonami ma ritengo che lo script che ti ho postato prima sia abbastanza chiaro.


    <div class="catmenu" id="A"></div>
    <div class="catmenu" id="B"></div>
    <div class="catmenu" id="C"></div>
    <div class="catmenu" id="D"></div>
    <div class="catmenu" id="E"></div>
    ... io qui continuo a vedere degli id (gli stessi che hai usato negli elementi <a> del menu) mentre ti ho scritto chiaramente che non puoi utilizzare id uguali, e ti ho indicato, con un esempio esplicito, come dovrebbe essere.
    Non capisco cosa non ti è chiaro.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  9. #9
    Utente di HTML.it
    Registrato dal
    Feb 2010
    Messaggi
    77
    grazie

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.