Javascript - Problema menù stile accordion attraverso elenco

Forum - Javascript - Problema menù stile accordion attraverso elenco

domenico_rizzo (Normal User)
Pro

Messaggi: 90
Iscritto: 27/07/2015

Postato alle 19:47
Lunedì, 27/07/2015

Salve a tutti...si.. appena dopo la presentazione, dato che sto lavorando ad un progetto, mi sono trovato subito davanti ad un problema che magari per molti di voi puo' risultare anche banale :-|

. Allora io avrei una serie di elenchi concatenati come di seguito:
Codice html

Codice sorgente - presumibilmente Javascript

<div class="navbar-mobile">
                <ul class="nav">
                <div class="mobile-search">
                          <form action="#" id="search_box" role="form">
                                <div class="wrapper">
                                        <input type="search" id="search" name="search" placeholder="Cerca qui" autocomplete="off" required="true" />
                                        <button type="submit" class="search_btn"><span class="fa fa-search"></span></button>
                                </div>
                        </form>
                <div class="return-back"><button class="button"><i class="fa fa-undo fa-2x"></i></button></div>
                </div>
                <li class="mobile-dropdown">
        <i class="fa fa-bars fa-2x"></i>
                        <div class="mobile-menu">  
                                <div class="menu-wrapper">
                                        <ul class="mobile-nav">
                                                <li><i class="fa fa-home"></i> <a href="/myProfile">Home</a></li>
                <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Add Profile<em>10</em>
                        <span class="fa fa-chevron-down"></span></a>
                        <ul class="dropdown-menu">
                                <li href="/twitter/oauth"><a>Twitter</a></li>
                                <li href="/facebook/oauth"><a>Facebook</a></li>
                                <li href="/googleplus/oauth"><a>Google Plus</a></li>
                                <li href="/instagram/oauth"><a>Instagram</a></li>
                        </ul>
              </li>
 
                <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Create<span class="fa fa-chevron-down"></span></a>
                        <ul class="dropdown-menu">
                                <li><a href="/createStream">Create Stream</a></li>
                                <li><a href="/createAlbum">Create Album</a></li>
                                <li><a href="/createGroup">Create Group</a></li>
                        </ul>
                </li>
                <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">View<span class="fa fa-chevron-down"></span></a>
                        <ul class="dropdown-menu">
                                <li><a href="/viewStreams">View Streams</a></li>
                                <li><a href="/viewAlbums">View Albums</a></li>
                                <li><a href="/viewGroups">View Groups</a></li>
                        </ul>
                </li>
                <li class="item"><a href="/schedule">Schedule</a></li>
                                        </ul>
                                </div>
                        </div>
                </li>
                <li class="search"><a class="fa fa-search fa-2x"></a></li>
                <li class="admin mobile-dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-2x"></i></a></li>
                </ul>
        </div>

vorrei procedere in modo tale che qualora l'user andasse a cliccare su una voce in cui abbia i sottomenù (in questo caso <li class="dropdown">) si aprissero con effetto slide chiudendo però gli altri "menù". Io ho fatto questo al momento:
Codice Javascript

Codice sorgente - presumibilmente Plain Text

$('.mobile-nav > li.dropdown').on('click', function(event){
     $('.dropdown-menu > ul').next().slideToggle();
});

L'evento è correttamente intercettato ma i sottomenù non fanno quello che dovrebbero.... HELP!! :hail:

Roby94 (Member)
Guru

Messaggi: 1170
Iscritto: 28/12/2009

Postato alle 19:59
Lunedì, 27/07/2015

sarebbe possibile avere una pagina di esempio online? senza indentatura corretta non si riesce a capire molto.

domenico_rizzo (Normal User)
Pro

Messaggi: 90
Iscritto: 27/07/2015

Postato alle 20:49
Lunedì, 27/07/2015

Testo quotato

Postato originariamente da Roby94:

sarebbe possibile avere una pagina di esempio online? senza indentatura corretta non si riesce a capire molto.

@Roby94 hai effettivamente ragione! Mi scuso per non averci pensato da me. Metterlo online? Sinceramente è una piccola parte di un grosso progetto quindi se è possible evitarlo sarebbe la miglior cosa (ma se fosse necessario potrei anche farlo :rofl:

).
Provo a indentarti il codice e metterti uno screen di ciò che viene fuori, auspicando cosi si capisca :hail:

Codice sorgente - presumibilmente Javascript

<div class="navbar-mobile hidden-desktop">
            <ul class="nav">
                <div class="mobile-search">
                    <form action="#" id="search_box" role="form">
                        <div class="wrapper">
                            <input type="search" id="search" name="search" class="awesomplete" id="spotlight" placeholder="Cerca qui" autocomplete="off" required="true" data-list="Ada, Ara, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" />
                            <button type="submit" class="search_btn"><span class="fa fa-search"></span></button>
                        </div>
                    </form>
                    <div class="return-back"><button class="button"><i class="fa fa-undo fa-2x"></i></button></div>
                </div>
                <li class="mobile-dropdown">
                    <i class="fa fa-bars fa-2x"></i>
                    <div class="mobile-menu">
                        <div class="menu-wrapper">
                            <ul class="mobile-nav">
                                <li><i class="fa fa-home"></i> <a href="/myProfile">Home</a></li>
                                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Add Profile<em>10</em>
                                    <span class="fa fa-chevron-down"></span></a>
                                    <ul class="dropdown-menu">
                                        <li href="/twitter/oauth"><a>Twitter</a></li>
                                        <li href="/facebook/oauth"><a>Facebook</a></li>
                                        <li href="/googleplus/oauth"><a>Google Plus</a></li>
                                        <li href="/instagram/oauth"><a>Instagram</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Create<span class="fa fa-chevron-down"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="/createStream">Create Stream</a></li>
                                        <li><a href="/createAlbum">Create Album</a></li>
                                        <li><a href="/createGroup">Create Group</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">View<span class="fa fa-chevron-down"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="/viewStreams">View Streams</a></li>
                                        <li><a href="/viewAlbums">View Albums</a></li>
                                        <li><a href="/viewGroups">View Groups</a></li>
                                    </ul>
                                </li>
                                <li class="item"><a href="/schedule">Schedule</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="search">
                    <a class="fa fa-search fa-2x"></a>
                </li>
                <li class="admin mobile-dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-2x"></i></a>
                </li>
            </ul>
        </div>

Qui il file pulito e "syntaxato html" per una più facile lettura: http://pastebin.com/wdytA4Xc

domenico_rizzo ha allegato un file: Screenshot 2015-07-27 20.21.08.png (35089 bytes)
Clicca qui per guardare l'immagine

Ultima modifica effettuata da domenico_rizzo il 27/07/2015 alle 20:54

pierotofy (Admin)
Guru^2

Messaggi: 6230
Iscritto: 04/12/2003

Postato alle 23:39
Lunedì, 27/07/2015

Prova con:

Codice sorgente - presumibilmente Plain Text

$('.mobile-nav > li.dropdown').on('click', function(event){
     $(this).next().slideToggle();
});

Il mio blog: https://piero.dev

Roby94 (Member)
Guru

Messaggi: 1170
Iscritto: 28/12/2009

Postato alle 3:36
Martedì, 28/07/2015

Io ti suggerirei di cambiare approccio. Gestirei le animazioni direttamente da css con le classi, in questo modo al click non devi far altro che cambiare la classe di tutti i menu con quella relativa ai menu chiusi e poi impostare la classe del menu aperto su quello corrente. Spero che si capisca cosa intendo.

pierotofy (Admin)
Guru^2

Messaggi: 6230
Iscritto: 04/12/2003

Postato alle 4:09
Martedì, 28/07/2015

La tecnica dei CSS funziona bene solo con browser recenti tuttavia.

Il mio blog: https://piero.dev

domenico_rizzo (Normal User)
Pro

Messaggi: 90
Iscritto: 27/07/2015

Postato alle 10:20
Martedì, 28/07/2015

@Roby94 ero giusto partito dal css con animazioni e tutto il resto ma appunto con la compatibilità delle versioni dei vari browser ho alla fine deciso di cambiare approccio.
@pierotofy con il tuo suggerimento ahimè mi nasconde solamente i menu tra di loro, quello che sta sopra racchiude gli altri.

Lavorandoci comunque su per un po' sono riuscito a risolvere, posto di seguito la soluzione visto che magari potrà aiutare qualcuno nella mia stessa situazione. Colgo l'occasione per ringraziare entrambi per i suggerimenti dati! :k:

Codice sorgente - presumibilmente Plain Text

$(".mobile-nav > li.dropdown").click(function(){
        if(false == $("ul",this).is(':visible')) {
            $('.mobile-nav ul').slideUp(300);
        }
        $("ul",this).slideToggle(300);
});

Roby94 (Member)
Guru

Messaggi: 1170
Iscritto: 28/12/2009

Postato alle 12:54
Martedì, 28/07/2015

Avete ragione, è da tempo che non mi scontro più con quella brutta realtà della compatibilità browser.