javascript - 如何一次只打开一个子菜单

Question

我制作了响应式菜单。这工作正常。

但问题是这样的。我想一次打开一个菜单。

当打开一个子菜单时，应该隐藏另一个菜单？

我该怎么做？

这是我的脚本代码

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

这里是 My Menu

Answer 1

这是一个工作演示。

$(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>

解释:对于每个 slibling li，如果其 moremain 切换具有事件类，则切换其第一个 ul。