我做了响应式菜单.这工作正常.
但问题是这个.我想一次打开一个菜单.
打开一个子菜单时应该隐藏另一个菜单?
我怎样才能做到这一点?
这是我的脚本代码
$('.moremain').click(function(){
$(this).next('.hrmenu ul ul').slideToggle();
$(this).toggleClass("active");
});
这是My Menu
解决方法:
这是一个工作演示.
$(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 lis,如果其moremain toggle具有活动类,则切换其第一个ul.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。