Javascript - Problema menù stile accordion attraverso elenco

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

<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

$('.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!!

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 ).
Provo a indentarti il codice e metterti uno screen di ciò che viene fuori, auspicando cosi si capisca

        <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: pastebin.com/…

Prova con:

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

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.

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

@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!

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

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