Jquery 带单切换按钮的双引导导航栏

我有两个引导导航栏，我想在移动视图中用一个切换按钮将两个列表项折叠成一个ul

任何帮助都会很好

 <nav class="navbar nav1">
  <div class="container">
    <div class="navbar-header">
     <!--  <button type="button" class="navbar-toggle toggle1" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button> -->
     <!--  <a class="navbar-brand" href="#">WebSiteName</a> -->
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right top-nv text-uppercase">
        <li><a href="#">About US</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Group Site</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#"><i>Client Login</i></a></li>
      </ul>
    </div>
  </div>
</nav>
    <!-----------     ------------->

    <div class="navbar navbar-inverse nav2" role="navigation">  
    <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="images/home/logo.png" alt="LOGO"></a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar2">
        <ul class="nav navbar-nav pull-right cust-nav text-uppercase ">
            <li><a href="#">Wealth management</a></li>
            <li><a href="#">Multi manager</a></li>
            <li><a href="#">Asset manager</a></li>
            <li><a href="#">International</a></li>
            <li><a href="#">News & Insights</a></li>
            <div class="hd hidden-md"></div>
        </ul>

        </div>
        </div>
    </div>

切换导航

我尝试的脚本是。问题是我无法将它附加到另一个ul，以及如何中断foreach循环

$(document).ready(function(){
    if ($(window).width() < 960){
        alert();
        $( ".navbar-toggle" ).click(function() {
            $(".navbar-nav.top-nv").each(function(){
                alert(2);   
                $(".hd").append('<li>'+$(this).text()+'<br>'+'</li>').css({"color":"red","display":"block"});
            });
            $(".navbar-nav.top-nv").remove();
            //$(".two").append($("ul.two"));
        }); 
    }
});

$（文档）.ready（函数（）{
如果（$（窗口）.width（）<960）{
警惕（）；
$（“.navbar切换”）。单击（函数（）{
$（“.navbar nav.top nv”）。每个（函数（）{
警报（2）；
$（“.hd”）.append（'
'+$（this.text（）+'
'+'
'））.css（{“color”：“red”，“display”：“block”}）；
});
$（“.navbar nav.top nv”）.remove（）；
//$（.two”）。追加（$（.ul.two”）；
}); 
}
});

这将把

.nav1

中的列表项复制并添加到

.nav2

列表的末尾

$(document).ready(function(){
  if ($(window).width() < 960){
      alert();
      $( ".navbar-toggle" ).click(function() {
          $(".navbar-nav.top-nv li").each(function(){
              var $navItem = $(this).clone();
              alert(2); 
              $navItem.find('a').css({"color":"red","display":"block"});
              $("#myNavbar2 ul").append($navItem);
          });
          $(".navbar-nav.top-nv").remove();
          //$(".two").append($("ul.two"));
      }); 
  }
});

$（文档）.ready（函数（）{
如果（$（窗口）.width（）<960）{
警惕（）；
$（“.navbar切换”）。单击（函数（）{
$（“.navbar-nav.top-nv li”）。每个（函数（）{
var$navItem=$（this.clone（）；
警报（2）；
$navItem.find（'a'）.css（{“color”：“red”，“display”：“block”}）；
$（“#myNavbar2 ul”）。追加（$navItem）；
});
$（“.navbar nav.top nv”）.remove（）；
//$（.two”）。追加（$（.ul.two”）；
}); 
}
});

这将把

.nav1

中的列表项复制并添加到

.nav2

列表的末尾

$(document).ready(function(){
  if ($(window).width() < 960){
      alert();
      $( ".navbar-toggle" ).click(function() {
          $(".navbar-nav.top-nv li").each(function(){
              var $navItem = $(this).clone();
              alert(2); 
              $navItem.find('a').css({"color":"red","display":"block"});
              $("#myNavbar2 ul").append($navItem);
          });
          $(".navbar-nav.top-nv").remove();
          //$(".two").append($("ul.two"));
      }); 
  }
});

$（文档）.ready（函数（）{
如果（$（窗口）.width（）<960）{
警惕（）；
$（“.navbar切换”）。单击（函数（）{
$（“.navbar-nav.top-nv li”）。每个（函数（）{
var$navItem=$（this.clone（）；
警报（2）；
$navItem.find（'a'）.css（{“color”：“red”，“display”：“block”}）；
$（“#myNavbar2 ul”）。追加（$navItem）；
});
$（“.navbar nav.top nv”）.remove（）；
//$（.two”）。追加（$（.ul.two”）；
}); 
}
});

引导导航栏不会以960像素的速度折叠到移动设备中。我认为更好的方法是使用show.bs.collapse事件。768px是导航栏的默认折叠点

$('#myNavbar2').on('show.bs.collapse', function () {
  $('#myNavbar2').append($('#myNavbar').html());
  $('#myNavbar2 ul').last().addClass('navbar navbar-nav');
});
$('#myNavbar2').on('hidden.bs.collapse', function () {
  $('#myNavbar2 ul:last-child').remove();
});
$(window).on('resize', function () {
  if (window.innerWidth > 768) {$('#myNavbar2').collapse('hide');}
});

引导导航栏不会以960像素的速度折叠成移动设备。我认为更好的方法是使用show.bs.collapse事件。768px是导航栏的默认折叠点

$('#myNavbar2').on('show.bs.collapse', function () {
  $('#myNavbar2').append($('#myNavbar').html());
  $('#myNavbar2 ul').last().addClass('navbar navbar-nav');
});
$('#myNavbar2').on('hidden.bs.collapse', function () {
  $('#myNavbar2 ul:last-child').remove();
});
$(window).on('resize', function () {
  if (window.innerWidth > 768) {$('#myNavbar2').collapse('hide');}
});