javascript - Bootstrap 4 响应式菜单 - 在折叠时添加元素

Question

我的网站上有一个使用 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

这可能吗？

Answer 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 会更改以匹配折叠菜单。