Bootstrap 4 响应式菜单 - 在折叠时添加项目答案

【问题标题】：Bootstrap 4 Responsive menu - add items on collapseBootstrap 4 响应式菜单 - 在折叠时添加项目
【发布时间】：2018-11-25 14:31:03
【问题描述】：

我的网站上有一个使用 Bootstrap 4 导航栏的主菜单。

我还有另一个 div (.social-navbar)，其中包含一些额外的菜单项，我想从它们所在的位置移动它们，并将它们放入仅在手机上的 Bootstrap 菜单。基本上，当菜单在移动设备上折叠时，我希望社交导航栏项目（facebook/twitter 图标）和登录按钮出现在 Bootstrap 的导航栏导航菜单内。

请参阅下面的 Codepen...

https://codepen.io/anon/pen/KeXZJL

  <div class="social-navbar clearfix">
     <ul class="social-icons">
        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
     </ul>
     <ul class="login float-right">
        <li class="join"><a href="#">Join Now</a></li>
     </ul>
  </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <a class="navbar-brand" href="#">LOGO</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarMain">
        <ul class="navbar-nav ml-auto">
           <li class="nav-item active">
              <a class="nav-link" href="#">Item 1</a>
           </li>
          <li class="nav-item active">
              <a class="nav-link" href="#">Item 2</a>
           </li>
          <li class="nav-item active">
              <a class="nav-link" href="#">Item 3</a>
           </li>
          <li class="nav-item active">
              <a class="nav-link" href="#">Item 4</a>
           </li>
        </ul>
     </div>
  </nav>

https://codepen.io/anon/pen/KeXZJL

这可能吗？

【问题讨论】：

作为一个快速的 hack，我想将所有内容添加到菜单中，并将移动菜单元素隐藏在非移动屏幕上（最小宽度：992px ?? 或您选择的任何内容）
是的，不过我想避免重复项目。
没有标记复制或JS真的没有简单的方法。

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

您可以在 BODY 标记的最后添加此 javascript：

<script>

    var x = window.matchMedia("(max-width: 465px)")

    function mobileMenu(x) {
        if (x.matches) { 
            document.getElementById("navbarMain").prepend(
                document.querySelector(".social-navbar")
            );

            document.querySelector(".social-navbar").style.backgroundColor = "inherit";

        } else{
            document.querySelector("body").prepend(
                document.querySelector(".social-navbar")
            );

            document.querySelector(".social-navbar").style.backgroundColor = "#000";
        } 
    }

    mobileMenu(x) 
    x.addListener(mobileMenu)   


</script>

当屏幕宽度为 465 像素或更窄时，.social-navbar 将被移动到导航栏折叠菜单中，并且其 backgroundColor 会更改以匹配折叠菜单。

【讨论】：