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

Question

我在页面的不同位置有 2 个单独的菜单，如下所示:

<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 时，有没有一种方法可以将两个导航组合成一个全宽样式的切换下拉菜单？

所以他们会变成:

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

Answer 1

只需 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); 

...这是一种残忍的行为:

LIVE DEMO

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();
});