JavaScript:下拉式动态导航栏干扰下拉元素宽度

Question

谢谢你考虑这个问题。

代码可以在GitHub，here上找到。

这里有一些事情要做，所以在我们讨论代码之前，我想先解释一下它。

我有一个函数makeNavigation，它接受三个参数来创建导航条:导航栏的条目数组、导航栏应该去的元素id和大小。

当不包括边距时，这很好。然而，只要这两行空白处没有注释，那么下拉式内容就比它应该的要大得多。有什么想法？

此外，当窗口尽可能小时，而不是只有一个下拉元素，"Home“和下拉条就会堆放起来。为什么/我怎么能纠正这个问题？

注:I源W3 CSS和hover-master

因此，对于变量，我们有页和“大小”。

var pages = ["HOME","ABOUT","PAGE3","PAGE4","PAGE5","PAGE6","PAGE7","PAGE8"];
var extraSmall, small, medium, large;
extraSmall = 610;
small = 700;
medium = 800;
large = 1250;

职能：

function getSizeInText(size) {

  if (size > large) {
    return("large")
  };
  if (extraSmall < size && size <  medium) {
    return("small")
  };
  if (medium <= size && size <= large) {
    return("medium")
  };
  if (size <= extraSmall) {
    return("extraSmall")
  }
}

function makeNavigation(navArray, navID, size) {

  var theID = document.getElementById(navID);
  var mar = 8;
  var pad = 2;
  theID.innerHTML = null;
  // theID.style.marginRight = mar + "%";
  // theID.style.marginLeft = mar + "%";
  theID.style.marginTop = mar/4 + "%";
  if (size == "extraSmall") {
    var numNav = navArray.length;
    theID.innerHTML += '<li class="w3-dropdown-hover w3-centered" '+
    'style="width:' + spaceAllocated + '%" >' +
    '<a class="hvr-reveal navFont">' +
    '<i class="fa fa-bars"></i></a>' +
    '<ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%">' +
    '</ul>' + '</li>';
    for (var i = 0; i < numNav; i++ ) {
      document.getElementById('dropDownContent').innerHTML+=
      '<li style="width:' +
      (100 - 2*pad) + '%">'+
      '<a  class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html">' +
      navArray[i] + '</a></li>';
    }
  }


  if (size == "small") {
    var numNav = navArray.length;
    var spaceAllocated = (100 ) / 2;
    for (var i = 0; i < 1; i++) {
        theID.innerHTML +=
        '<li style = "width:' +
        spaceAllocated +
        '%"><a  class="hvr-reveal navFont"' +
        ' href="' +
        navArray[i].toLowerCase() +
        '.html">' +
        navArray[i] + '</a></li>';
    };
    theID.innerHTML += '<li class="w3-dropdown-hover w3-centered" '+
    'style="width:' + spaceAllocated + '%" >' +
    '<a class="hvr-reveal navFont">' +
    '<i class="fa fa-bars"></i></a>' +
    '<ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%">' +
    '</ul>' + '</li>';
    for (var i = 1; i < numNav; i++ ) {
      document.getElementById('dropDownContent').innerHTML+=
      '<li style="width:' +
      (100 - 2*pad) + '%">'+
      '<a  class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html">' +
      navArray[i] + '</a></li>';
    }
  }

  if (size == "medium") {
    var numNav = navArray.length;
    var half = Math.floor(numNav/2);
    var spaceAllocated = (100 )  / (half+1);

    for (var i = 0; i < half; i++) {
        theID.innerHTML +=
        '<li style = "width:' +
        spaceAllocated +
        '%"><a  class="hvr-reveal navFont"' +
        ' href="' +
        navArray[i].toLowerCase() +
        '.html">' +
        navArray[i] + '</a></li>';
    };

    theID.innerHTML += '<li class="w3-dropdown-hover w3-centered" '+
    'style="width:' + spaceAllocated + '%" >' +
    '<a class="hvr-reveal navFont">' +
    '<i class="fa fa-bars"></i></a>' +
    '<ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%">' +
    '</ul>' + '</li>';
    for (var i = half; i < numNav; i++ ) {
      document.getElementById('dropDownContent').innerHTML+=
      '<li style="width:' +
      (100 - 2*pad) + '%">'+
      '<a  class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html">' +
      navArray[i] + '</a></li>';
    }
  };

  if (size == "large") {
    var numNav = navArray.length;
    var spaceAllocated = (100 )  / numNav;

    for (var i = 0; i < numNav; i++) {
        theID.innerHTML +=
        '<li style = "width:' +
        spaceAllocated +
        '%"><a  class="hvr-reveal navFont"' +
        ' href="' +
        navArray[i].toLowerCase() +
        '.html">' +
        navArray[i] + '</a></li>';
    };
  };
}

然后在HTML中：

<div class="w3-container w3-section"><ul id="navBar" class="w3-navbar w3-center"></ul></div>

<script type="text/javascript">
    var windowWidth;
    var size;

    jQuery(document).ready(function(){
      windowWidth = jQuery(window).width();
      size = getSizeInText(windowWidth);
      if (windowWidth > large) {}
      if (windowWidth <  medium) {}
      if (medium <= windowWidth && windowWidth <= large) {}
    });

    jQuery(window).resize(function () {
      windowWidth = jQuery(window).width();
      size = getSizeInText(windowWidth);
      if (windowWidth > large) {
        makeNavigation(pages, "navBar", size);
      }

      if (windowWidth <  medium) {
        makeNavigation(pages, "navBar", size);
      }

      if (medium <= windowWidth && windowWidth <= large) {
        makeNavigation(pages, "navBar", size);
      }



    });
  </script>

更新

programmer5000给出了这个特殊问题的解决方案。但是，当不使用w3-css时，相同的解决方案不起作用。怎么会这样?

/* Drop down content */
li a, .dropbtn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    text-align: center;
    width: inherit;
    z-index: 1;
}

.dropdown-content a {
    text-decoration: none;
    display: block;
}


.dropdown:hover .dropdown-content {
    display: block;
}




<nav id ='navigation-bar'>
  <ul>
    <li><a href="#"> HOME </a></li>    
    <li class="dropdown">
      <a class="dropbtn">TEST</a>
      <div class="dropdown-content">
        <a>1</a>
        <a>2</a>
        <a>3</a>
      </div>
    </li>
  </ul>
</nav>

Answer 1

赏金说：

2.)为什么当窗口的宽度最小时，"HOME“会堆放在下拉条的顶部。

结果发现这是一个特殊的问题。试试这个：

@media screen and (max-width: 600px){
   .w3-navbar li:not(.w3-opennav) {
       width: 50% !important;
       float: left !important;
   }
}

这将解决这个问题。

为#1：

1.)主导航条元素的不同宽度和下拉

#dropDownContent li {
    width: 100% !important;
}
.w3-dropdown-hover:hover .w3-dropdown-content{
    position: initial;
}

对两者来说，这只是一些奇怪的绝对位置问题和一些特殊性问题。<head>总计: 12行CSS!!只需将其粘贴在末尾的样式标签中，并在评论中提到这个问题或我(programmer5000)。