javascript - 下拉菜单在导航栏内不起作用，但在外部有效

Question

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

如果我测试下拉代码，将其带出导航栏，它就可以工作。但在导航栏内它没有。谁能帮帮我吗？如果您在阅读整篇文章时需要帮助或需要任何解释，请询问。需要帮助的是我。在此先感谢您。

这是我的 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>

这是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>

Answer 1

根据您在 HTML 中使用的 css 类，我认为您使用的是 Bootstrap 。在这种情况下，您真的不需要添加任何 javascript 来使用下拉菜单。确保您在页面中链接了 bootstrap 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>

这是一个例子:https://jsfiddle.net/dmkh8xj1/