Javascript 下拉菜单没有'；不在导航栏内工作，但在导航栏外工作

我正在尝试向导航栏添加下拉菜单。但是当我点击下拉菜单时，它不会显示菜单，它不会显示菜单。我一直在寻找解决方案，还有其他相关问题。但这些都是代码特定的问题，与我的代码无关

如果我在navgar之外测试下拉代码，它就会工作。但是在导航栏里面它没有。有人能帮我吗？如果你在阅读全文方面需要帮助或需要任何解释，请询问。需要帮助的是我。提前谢谢

这是我的HTML：

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
        </button>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="/"><span class="glyphicon glyphicon-home"></span> Home</a></li>
//This is the part of dropdown//
            <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Dropdown</button>
              <div id="myDropdown" class="dropdown-content">
                <a href="#home">Home</a>
                <a href="#about">About</a>
                <a href="#contact">Contact</a>
              </div>
            </div>
          </div> 
        </div>
        </ul>
      </div>
    </div>
</nav>

//这是下拉列表的一部分//
下拉列表

下面是我正在应用的CSS：

<style>
  .dropbtn {
      background-color: #3498DB;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
  }

  .dropbtn:hover, .dropbtn:focus {
      background-color: #2980B9;
  }

  .dropdown {
      position: relative;
      display: inline-block;
  }

  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }

  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }

  .dropdown a:hover {background-color: #ddd}

  .show {display:block;}

  body{
    background-color:#f1f1f1;
  }

      /* Remove the navbar's default margin-bottom and rounded borders */ 
      .navbar {
        overflow: hidden;
        margin-bottom: 0;
        border-radius: 0;
        width: 100% ;
        height: 30px;
      }
      .navbarw3 {
      overflow: hidden;
      background-color: #333;
      font-family: Arial, Helvetica, sans-serif;
  }

  .navbar a {
      float: left;
      font-size: 16px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
   .main {
      margin-top: 40px;  Add a top margin to avoid content overlay 
      }

      /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
      .row.content {height: 565px}

      /* Set gray background color and 100% height */
      .sidenav {
        padding-top: 20px;
        background-color: #f1f1f1;
        height: 100%;
      }

      /* Set black background color, white text and some padding */
      footer {
        background-color: #555;
        color: white;
        padding: 15px;
      }

      /* On small screens, set height to 'auto' for sidenav and grid */
      @media screen and (max-width: 767px) {
        .sidenav {
          height: auto;
          padding: 15px;
        }
        .row.content {height:auto;} 
      }
    </style>

.dropbtn{
背景色：#3498DB；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#2980B9；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表a:悬停{背景色：#ddd}
.show{display:block；}
身体{
背景色：#f1f1；
}
/*删除导航栏的默认边距底部和圆角边框*/
navbar先生{
溢出：隐藏；
页边距底部：0；
边界半径：0；
宽度：100%；
高度：30px；
}
.navbarw3{
溢出：隐藏；
背景色：#333；
字体系列：Arial、Helvetica、无衬线字体；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
梅因先生{
页边距顶部：40px；添加顶部页边距以避免内容重叠
}
/*设置网格的高度，使sidenav可以为100%（根据需要调整）*/
.row.content{高度：565px}
/*设置灰色背景色和100%高度*/
.侧导航{
填充顶部：20px；
背景色：#f1f1；
身高：100%；
}
/*设置黑色背景色、白色文本和一些填充*/
页脚{
背景色：#555；
颜色：白色；
填充：15px；
}
/*在小屏幕上，将sidenav和grid的高度设置为“自动”*/
@媒体屏幕和屏幕（最大宽度：767px）{
.侧导航{
高度：自动；
填充：15px；
}
.row.content{height:auto；}
}

下面是javascript：

<script>
window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
</script>

window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

根据您在HTML中使用的css类，我假设您正在使用引导。在这种情况下，您真的不需要为使用下拉菜单添加任何javascript。确保在页面中链接了引导css和js文件，然后将html更改为如下内容：

<nav class="navbar justify-content-center navbar-expand-lg blackBg">
<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="home.html">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="about.html">About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="blog.html">Blog</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
    </li>
    <li class="dropdown nav-item">
        <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Gallery
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu blackBg">
            <li>
                <a href="#">Smiles</a>
            </li>
            <li>
                <a href="#">Cry's</a>
            </li>
            <li>
                <a href="#">Videos</a>
            </li>
            <li>
                <a href="#">Choreography</a>
            </li>
            <li>
                <a href="#"></a>
            </li>
        </ul>
    </li>
</ul>

---

下面是一个示例：

您不必为引导下拉列表编写任何js。只需包括他们的JSemad，感谢您的努力。你的下拉导航栏工作得很好，给了我想要的。但当我把这段代码放在我的项目中时，下拉菜单就停止工作了。我想我得放弃一个下拉列表了。我想要一个普通的导航条。再次谢谢。