Question

我有两个bootstrap导航栏，其中我想在移动视图中使用单个切换按钮将两个列表项折叠为单个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"));
        }); 
    }
});

Answer 1

这会将列表项从.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"));
      }); 
  }
});

Answer 2

Bootstrap导航栏不以960px折叠到移动设备中。我认为更好的方法是使用'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');}
});

Working Demo on Codeply

具有单个切换按钮的双Bootstrap Navbar

2 个答案: