构建一个自定义导航栏，该导航栏将在整个导航更改为完全下拉菜单之前将项目向下移动

Question

我只想使用Bootstrap部分进行设计和外观设计，但我还想使用here中发现的JavaScript为其提供一个自定义的下拉菜单，该菜单会在导航菜单展开时自动构建屏幕。

使用CSS代码需要使用某些JavaScript代码。

我删除了很多CSS代码，但是JavaScript无法正常工作。

HTML代码

已删除！

CSS代码

已删除！

JavaScript

已删除！

Dropdown右侧是一个灰色栏，我希望它与导航栏的颜色相同。

---

找出了CSS代码，将其简化为1部分，但是现在引导程序无法正常工作。 <ul class="navbar-nav mr-auto links">中带有的所有内容都将移至<li class="nav-item dropdown hidden">，但当它达到屏幕的最大尺寸时，它一次应为1。

HTML代码

<nav class="navbar navbar-expand-md navbar-dark info-color">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto links">
            <li class="nav-item active">
               <a class="nav-link waves-effect waves-light" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-effect waves-light" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-effect waves-light" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-effect waves-light" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-effect waves-light" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-effect waves-light" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-effect waves-light" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-effect waves-light" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link waves-effect waves-light" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle waves-effect waves-light" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu dropdown-info" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item waves-effect waves-light" href="#">Action</a>
                    <a class="dropdown-item waves-effect waves-light" href="#">Another action</a>
                    <a class="dropdown-item waves-effect waves-light" href="#">Something else here</a>
                </div>
            </li> 
        </ul> 
        <li class="nav-item dropdown hidden">
          <a class="nav-link dropdown-toggle waves-effect waves-light" id="navbarDropdownMenuHidden" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
          <div class="dropdown-menu dropdown-info hidden-links" aria-labelledby="navbarDropdownMenuHidden">
          </div>
        </li>
    </div>
</nav>

CSS代码

li.nav-item.hidden {
  display: none;
}

JavaScript代码

$(function() {

  var $nav = $('nav.navbar');
  var $btn = $('nav.navbar a#navbarDropdownMenuHidden');
  var $btn_show = $('nav.navbar li.nav-item.hidden');
  var $vlinks = $('nav.navbar .links');
  var $hlinks = $('nav.navbar .hidden-links');

  var numOfItems = 0;
  var totalSpace = 0;
  var breakWidths = [];

  // Get initial state
  $vlinks.children().outerWidth(function(i, w) {
    totalSpace += w;
    numOfItems += 1;
    breakWidths.push(totalSpace);
  });

  var availableSpace, numOfVisibleItems, requiredSpace;

  function check() {

    // Get instant state
    availableSpace = $vlinks.width() - 10;
    numOfVisibleItems = $vlinks.children().length;
    requiredSpace = breakWidths[numOfVisibleItems - 1];

    // There is not enought space
    if (requiredSpace > availableSpace) {
      $vlinks.children().last().prependTo($hlinks);
      numOfVisibleItems -= 1;
      check();
      // There is more than enough space
    } else if (availableSpace > breakWidths[numOfVisibleItems]) {
      $hlinks.children().first().appendTo($vlinks);
      numOfVisibleItems += 1;
    }
    // Update the button accordingly
    $btn.attr("count", numOfItems - numOfVisibleItems);
    if (numOfVisibleItems === numOfItems) {
      $btn_show.addClass('hidden');
    } else $btn_show.removeClass('hidden');
  }

  // Window listeners
  $(window).resize(function() {
    check();
  });

  $btn.on('click', function() {
    $hlinks.toggleClass('hidden');
  });

  check();

});