Problém s otevíráním bloků v jquery

Dobrý den,

mám menu a podmenu, po kliknutí na položku v menu se mi otevře pomocí jquery vybrané podmenu a při dalším kliknutí se zavře. mohl by mi někdo prosím poradit, aby když budu mít otevřené jedno podmenu a kliknu na odkaz pro otevření druhého podmenu se to první podmenu zavřelo a zůstalo otevřené pouze to druhé. Děkuji za rady

Kód:

 $('#master-07 #as-menu ul li').click(function(){
    var id = this.id;
    $('#master-07 #as-menu ul #'+ id +' ul').slideToggle('slow', function() {
	  $('#master-07 #as-menu ul #'+ id +' a:first').toggleClass('active');
    });
  });

Kód:

	  <div id="as-menu">
	    <h4>Language menu</h4>
		<ul>
		  <li id="sm0"><a href="#">North Europe</a>
		    <ul>
		      <li><a href="#">Norwegian</a></li>
			  <li><a href="#">Finnis</a></li>
			  <li><a href="#">Ipsum lirem</a></li>
			  <li><a href="#">Lorem dolor lirem</a></li>
		    </ul>
		  </li>
		  <li id="sm1"><a href="#">West Europe</a>
		    <ul>
		      <li><a href="#">Norwegian</a></li>
			  <li><a href="#">Finnis</a></li>
			  <li><a href="#">Ipsum lirem</a></li>
			  <li><a href="#">Lorem dolor lirem</a></li>
		    </ul>
		  </li>
		  <li id="sm2"><a href="#">Arabic</a>
		    <ul>
		      <li><a href="#">Norwegian</a></li>
			  <li><a href="#">Finnis</a></li>
			  <li><a href="#">Ipsum lirem</a></li>
			  <li><a href="#">Lorem dolor lirem</a></li>
		    </ul>
		  </li>
		  <li id="sm3"><a href="#">Other language</a>
		    <ul>
		      <li><a href="#">Norwegian</a></li>
			  <li><a href="#">Finnis</a></li>
			  <li><a href="#">Ipsum lirem</a></li>
			  <li><a href="#">Lorem dolor lirem</a></li>
		    </ul>
		  </li>
		</ul>

Kód:

$('#as-menu > ul > li').click(function() {
    $(this)
        .find('> ul')
        .slideDown()
        .end()
        .find('> a')
        .addClass('active')
        .end()
        .siblings()
        .find('> ul')
        .slideUp()
        .end()
        .find('> a')
        .removeClass('active');
});

nebo třeba

Kód:

$('#as-menu > ul > li').click(function() {
    var
        $active = $(this),
        $menu = $active.parent();
    $('> li > ul', $menu).slideUp();
    $('> li > a', $menu).removeClass('active');
    $('> ul', $active).slideDown();
    $('> a', $active).addClass('active');
});

díky, funguje to bezvadně, jen mám ještě maličkost a to když kliknu v menu na položku která je otevřená, aby se zavřela a nebylo otevřeno žádné podmenu

Jestli je podnabídka otevřená, můžeš testovat pomocí .is(':visible')

Kód:

$('#as-menu > ul > li').click(function() {
    var
        $active = $(this),
        $menu = $active.parent();
    $('> li > ul', $menu).slideUp();
    $('> li > a', $menu).removeClass('active');
    if (!$('> ul', $active).is(':visible')) {
        $('> ul', $active).slideDown();
        $('> a', $active).addClass('active');
    }
});

díky moc:)

Teď mě napadlo co když kód bude vypadat třeba takto ?

Kód:

	  <div id="as-menu">
	    <h4>Language menu</h4>
		<ul>
		  <li id="sm0"><a href="#">North Europe</a>
		    <ul>
		      <li><a href="#">Norwegian</a>
		        <ul>
			      <li><a href="#">Norwegian</a></li>
				  <li><a href="#">Finnis</a></li>
				  <li><a href="#">Ipsum lirem</a></li>
				  <li><a href="#">Lorem dolor lirem</a></li>
			    </ul>
			  </li>
			  <li><a href="#">Finnis</a></li>
			  <li><a href="#">Ipsum lirem</a></li>
			  <li><a href="#">Lorem dolor lirem</a></li>
		    </ul>
		  </li>
		  <li id="sm1"><a href="#">West Europe</a>
		    <ul>
		      <li><a href="#">Norwegian</a></li>
			  <li><a href="#">Finnis</a></li>
			  <li><a href="#">Ipsum lirem</a></li>
			  <li><a href="#">Lorem dolor lirem</a></li>
		    </ul>
		  </li>
		  <li id="sm2"><a href="#">Arabic</a>
		    <ul>
		      <li><a href="#">Norwegian</a></li>
			  <li><a href="#">Finnis</a></li>
			  <li><a href="#">Ipsum lirem</a></li>
			  <li><a href="#">Lorem dolor lirem</a></li>
		    </ul>
		  </li>
		  <li id="sm3"><a href="#">Other language</a>
		    <ul>
		      <li><a href="#">Norwegian</a></li>
			  <li><a href="#">Finnis</a></li>
			  <li><a href="#">Ipsum lirem</a></li>
			  <li><a href="#">Lorem dolor lirem</a></li>
		    </ul>
		  </li>
		</ul>

Kontras: Pro menu s libovolným počtem úrovní by to mohlo vypadat třeba takhle:

Kód:

$('#as-menu li').click(function() {
    var
        $menu = $(this).closest('ul'),
        $submenu = $('> ul', this);        
    $('li > ul', $menu).slideUp();
    $('li > a', $menu).removeClass('active');
    if ($submenu.length) {
        if (!$submenu.is(':visible'))
            $submenu
                .slideDown()
                .prev('a')
                .addClass('active');
        return false;
    }
});

Děkuji :) dávám +1