Question

i have simple side menu with this html code :

<div id="menu">
                    <div>
                        Menu Title
                    </div>
                    <ul class="menu">
                        <li>
                            <span>
                                first item
                            </span>
                            <ul>
                                <li>
                                    sub item
                                </li>
                                <li>
                                    sub item
                                </li>
                                <li>
                                    sub item
                                </li>
                            </ul>
                        </li>
                        <li>
                            <span>
                                second item
                            </span>
                            <ul>
                                <li>sub menu</li>
                                <li>sub menu</li>
                            </ul>
                        </li>
                        <li>
                            <span>
                                third item
                            </span>
                            <ul>
                                <li>
                                    sub menu
                                </li>
                                <li>
                                    sub menu
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

and css is :

#menu{
text-align:center;
font-size:13px;
font-family:tahoma;
color:#0000AA;
padding:2px 0;}
#menu div{
color:#0000AA;}
#menu ul{
text-align:right;
background-color: #FFFFFF;
list-style-type: none;
margin: 0px;
padding: 0px;}
#menu ul li{
display:block;
margin: 3px 2px;
cursor:hand;
cursor:pointer;}
#menu ul li span{
width:100%;
display:block;
background-color:#DDDDFF;}
#menu ul li span:hover{
background-color:#9999EE;}
#menu ul li ul{
display:none;}
#menu ul li ul li{
background-color:#EEEEEE;
margin:2px;
display: block;}
#menu ul li ul li:hover{
background-color:#FFFFFF;}
.submenu{
background-color: #CCCCFF;}  

and jquery code is :

    $(window).load(function(){
  $(".submenu").children(this).slideUp("slow");
});
$(document).ready(function(){
    $('ul.menu li span').click(function(){
    $("ul.menu li").find('ul').slideUp('fast');
    $(this).parent(this).find('ul').slideDown('fast');
    });
});

and my complate menu locate in http://jsfiddle.net/parseha/NkuG5/3/
this problem is : when clicking first item , sub menus sliding up and then sliding down , i want do not this run .
excuse me for this text and my mistake in content.
thanks.

Answer 1

The trick is to keep a track of which menu is expanded, and depending on its state (expanded or collapsed) determine what action to take (slide up or slide down).

You can achieve this by adding a class to the menu item when it is expanded, and remove that class when it is collapsed. Existence of that class will indicate whether the menu is expanded or collapsed.

Jquery code:

$(window).load(function() {
    $(".submenu").children(this).slideUp("slow");
});
$(document).ready(function() {
    $('ul.menu li span').click(function() {
        if ($(this).hasClass('current'))
        {
            $(this).removeClass('current');
            $("ul.menu li").find('ul').slideUp('fast');

        }
        else
        {
            $(this).addClass('current');
            $(this).parent(this).find('ul').slideDown('fast');            

        }
    });
});

Demo