将2个单独的菜单合并为一个菜单 [英] merge 2 separate menus into a single menu

问题描述

我在这样的页面上的不同位置有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();
});

这篇关于将2个单独的菜单合并为一个菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！