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?

Here is my Script code

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

Here is My Menu

Answer 1

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 2

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>

Answer 3

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 lis toggle its first ul if its moremain toggle has an active class.