How to open only one sub menu at a time

Question

I have made responsive menu. this is working fine.

But problem is this. I want to open one menu at a time.

when open one submenu another menu should be hide?

how can I do this?

$('.moremain').click(function(){
    $(this).next('.hrmenu ul ul').slideToggle();
    $(this).toggleClass("active");
});

Here is My Menu

Answer 1

Here is a working demo.

 $(document).ready(function(){ $('.hrmenu > ul').before("<span class='main'></span>"); $('.hrmenu ul ul').before("<span class='moremain'></span>"); $('.main').click(function(){ $('.hrmenu > ul').slideToggle(); }); $('.moremain').click(function(){ $(this).next('.hrmenu ul ul').slideToggle(); $(this).parents('li').eq(0).siblings().each(function(){ var _toggle = $(this).find('.moremain').eq(0); if(_toggle.hasClass("active")){ _toggle.removeClass("active"); $(this).find('ul').eq(0).slideToggle(); } }); $(this).toggleClass("active"); }); $(window).resize(function(){ if(window.screen()> 1000) { $('.hrmenu ul').show(); } }); }); 

 *{margin:0px;padding:0px} .hrmenu{max-width:1000px;margin:0px auto} .hrmenu ul{background:#06C;} .hrmenu ul:after{content:"";display:block;clear:both} .hrmenu ul li{float:left;position:relative;list-style-type:none;margin:1px;} .hrmenu ul li a{padding:5px;text-decoration:none;font-size:16px;font-family:arial;color:#fff;margin:1px;display:inline-block; } .hrmenu ul li a:hover{background:#39C} .hrmenu ul li:hover > ul{display:block} .hrmenu ul li ul{display:none;position:absolute;width:140px;left:0} .hrmenu ul li ul li{width:100%;background:#069;} .hrmenu ul li ul li ul{left:100%;top:0;width:200px;} .hrmenu ul li ul li ul li{background:#336;} .hrmenu ul li ul li ul li ul li{background:#366;} .main{display:none;height:19px;background:#003 url(threelines.png) no-repeat;cursor:pointer;text-align:right; } .moremain{height:19px;display:none;width:19px;background:green;cursor:pointer;position:relative; text-align: center; display: none;color:#fff} .moremain:after{content:' + '; font-size:18px;} .active{background:orange;display:none; text-align: center; } .active:after{content:' - '; font-size:18px;color:#fff;} @media screen and (max-width:1000px) { .moremain{ display: inline-block;} .main{ display: block;} .hrmenu ul{background:none} .hrmenu ul li{float:none; background: rgb(5, 27, 61);} .hrmenu ul{display:none} .hrmenu ul li:hover > ul{display:none} .hrmenu ul li ul{width:98%} .hrmenu ul li ul{position:relative} .hrmenu ul li a{width:86%} .hrmenu ul li{width:98%} .hrmenu ul li ul li ul{width:100%} .hrmenu ul li ul li ul{left:0} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class='hrmenu'> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>Products</a> <ul> <li><a href='#'>Product 1</a> <ul> <li><a href='#'>Sub Product</a></li> <li><a href='#'>Sub Product</a></li> </ul> </li> <li><a href='#'>Product 2</a> <ul> <li><a href='#'>Sub Product Sub</a> <ul> <li><a href='#'>Sub Product</a></li> <li><a href='#'>Sub Product</a></li> </ul> </li> <li><a href='#'>Sub Product</a></li> </ul> </li> </ul> </li> <li><a href='#'>About</a></li> <li><a href='#'>Contact</a></li> </ul> </div> 

Explanation : For each slibling li s toggle its first ul if its moremain toggle has an active class.

Answer 2

This is what you are looking for

$(".hr-nav-wrapper").hrNavMenu({ 
        speed:800, //integer in milliseconds  1000,2000
        menuType :"fromLeft", //fromLeft, fromTop
        desktopListWidth : "fluid", // fluid, default
        openEvent : "click", //click, mouseover
        multiple  : false // true, false

    });

Download Multilevel menu

Answer 3

You do not need javascript for doing a dropdown menu, just with css

/*rules for all li elements*/
li{
    position:relative;/*allow submenu to use the position of its parent as reference */
    display:inline-block;
    padding:5px;
}

/*rules for only submenu li elements*/

/*submenus are displayed only when its li parent is hovered*/
li > ul{
    display:none;
    position:absolute;
}
li:hover > ul{
    display:block;
}

/*submenus of submenus are displayed at the right of their parent and on the same abscisse*/
li li:hover > ul{
    left:100%;
    top:0;
}

 *{margin:0px;padding:0px;color:#fff} ul{ list-style-type:none;} a{ white-space: nowrap;} .hrmenu ul{background:#06C;} .hrmenu ul ul {background:#aaf;} .hrmenu ul ul ul {background:#06C;} .hrmenu ul ul ul ul {background:#aaf;} /*rules for all li elements*/ li{ position:relative;/*allow submenu to use the position of its parent as reference */ display:inline-block; padding:5px; } /*rules for only submenu li elements*/ /*submenus are displayed only when its li parent is hovered*/ li > ul{ display:none; position:absolute; } li:hover > ul{ display:block; } /*submenus of submenus are displayed at the right of their parent and on the same abscisse*/ li li:hover > ul{ left:100%; top:0; } 

 <div class='hrmenu'> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>Products</a> <ul> <li><a href='#'>Product 1</a> <ul> <li><a href='#'>Sub Product</a></li> <li><a href='#'>Sub Product</a></li> </ul> </li> <li><a href='#'>Product 2</a> <ul> <li><a href='#'>Sub Product Sub</a> <ul> <li><a href='#'>Sub Product</a></li> <li><a href='#'>Sub Product</a></li> </ul> </li> <li><a href='#'>Sub Product</a></li> </ul> </li> </ul> </li> <li><a href='#'>About</a></li> <li><a href='#'>Contact</a></li> </ul> </div>