将2个单独的菜单合并为一个菜单

本文介绍了将2个单独的菜单合并为一个菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在这样的页面上的不同位置有2个单独的菜单：

I have 2 separate menus in different places on a page like this:

<div class="TopNav"> <ul> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> </ul> </div> <div class="LowerNav"> <ul> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> </ul> </div>

有没有办法可以在全宽样式切换下拉时将两个导航组合下来设备宽度小于768？

Is there a way a can combine both of the navigations in a full width style toggle drop down when the device width is less the 768?

因此它们将转为：

<div class="BothNav"> <ul> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> </ul> </div>

推荐答案

只需 LIVE DEMO ：

var $LowerNavLI = $('.LowerNav li'), $TopNav = $('.TopNav'); function navResize(){ var mob = window.innerWidth<768; $LowerNavLI.appendTo((mob?".TopNav":".LowerNav")+' ul'); $TopNav[mob?"addClass":"removeClass"]('BothNav'); } navResize(); $(window).resize(navResize);

......这是一种残忍行为：

现场演示

var $LowerNavLI = $('.LowerNav li'); function navResize(){ var winW = window.innerWidth; var appended = false; if(winW < 768 && !appended ){ appended = true; $LowerNavLI.appendTo('.TopNav ul'); $('.TopNav').addClass('BothNav'); }else{ appended = false; $LowerNavLI.appendTo('.LowerNav ul'); $('.TopNav').removeClass('BothNav'); } } navResize(); $(window).resize(function(){ navResize(); });