Bootstrap下拉菜单未显示/正在工作

Question

我一整天都在寻找解决方案并尝试了很多不同的东西，但到目前为止，没有运气。缩小窗口时会出现导航栏切换（汉堡菜单），但单击按钮（汉堡菜单）时菜单不会出现。特别令人不安的是：首次加载页面时菜单背景是打开的。

请注意，我不会在标头中调用bootstrap.css，因为我想直接在style.css文件中自定义我的组件。使用Bootstrap，我是否有必要调用bootstrap.css并直接在其中进行自定义以使其工作，或者我可以从bootstrap.css中选择所选元素并将它们复制到style.css中以使其工作？

那是html

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="logo">
        <a class="navbar-brand page-scroll" href="#page-top"></a>
        </div>

      <div class="collapse navbar-collapse navbar-ex1-collapse" >
        <ul class="nav navbar-nav" >
          <li class="hidden">
            <a class="page-scroll" href="#page-top"></a>
          </li>
          <li>
            <a class="page-scroll" href=".contact">CONTACT</a>
          </li>
          <li>
            <a class="page-scroll" href=".recommendations">ABOUT</a>
          </li>
          <li>
            <a class="page-scroll" href=".work">WORK</a>
          </li>
        </ul>
      </div>

    </div>
  </nav>

所有脚本都在最后的正文中

<!-- JQUERY -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>

和css

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{
  display: block;
}
.navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  background-color: #08293C;
}
.navbar-fixed-top{
  top: 0;
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}
.container {
  margin-right: auto;
  margin-left: auto;
  width: 500px;
}
button{
  display: none;
}
  .logo {
  float: left;
  width: 209px;
  padding-top: 2px;
  height: 29px;
  background: url(../images/logo.svg);
  background-repeat: no-repeat;
  margin-top: 6px;
}
.logo a{
  width: 209px;
  height: 29px;
}
.nav {
  margin: 0px auto;
  width: 500px;
  cursor:pointer;
  font-weight: 100;
  font-size: 9pt;
  letter-spacing: 4px;
}
nav ul {
  padding:0px;
  margin:0px;
  cursor:pointer;
}
nav li {
  display:inline;
  margin-top: 23px;
  margin-left:20px;
  color: #FFFFFF;
  float:right;
}
nav a {
  color: #FFFFFF;
  text-decoration: none;
  display: block;
}
nav a:hover {
  color: #B4C6D1;
}
ul.nav li.iconhb {display: none;}
  .hidden{
  display: none!important;
}

@media only screen and (max-width: 767px) {
  .navbar-toggle {
    display: none;
  }
}

@media only screen and (max-width: 575px) {
  .container{
    margin-left: 5%;
    margin-right: 5%;
    width: auto;
  }
  .navbar-toggle{
    position: relative;
    float: right;
    margin-top: 12px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
  }
  .navbar-toggle:focus {
    outline: 0;
  }
  .navbar-toggle .icon-bar{
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
  }
  .navbar-toggle .icon-bar{
    margin-top: 4px;
  }
  .navbar-toggle{
    display: block;
  }
  button{
    cursor: pointer;
  }
  .navbar-toggle .icon-bar{
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
  }
  .navbar-toggle .icon-bar{
    margin-top: 4px;
  }
  .icon-bar{
    background-color: white;
  }
  .navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    height: 200px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  ul.nav.responsive li a {
    display: block;
    text-align: left;
  }
  ul.nav.responsive li {
    float: none;
    display: inline;
  }
  /* hide menu display iconhb */
  ul.nav li:not(:first-child) {display: none;}
  ul.nav li.iconhb {
    float: right;
    display: inline-block;
  }
  /* responsive nav */
  ul.nav.responsive {position: relative;}
  ul.nav.responsive li.iconhb {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.nav.responsive li {
    float: none;
    display: inline;
  }
  ul.nav.responsive li a {
    display: block;
    text-align: left;
  }
}

Answer 1

下面的代码可以完全按照您的要求运行。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <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="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>      
    </div>
  </div>
</nav>
</body>
</html>