Question

我使用此导航栏，现在我需要一些下拉菜单。我在navbar中添加了下拉代码，当我这样做时，它无法正常工作。单击或悬停时，什么也没有发生，我也不知道为什么。我尝试了一切，但仍然无法正常工作。有什么问题以及如何解决？

$(document).ready(function() {
  $(".menu-icon").on("click", function() {
        $("nav ul").toggleClass("showing");
  });
});

$(window).on("scroll", function() {
  if($(window).scrollTop()) {
        $('nav').addClass('black');
  }

  else {
        $('nav').removeClass('black');
  }
})

.logo {
  line-height: 60px;
  position: fixed;
  float: left;
  margin: 16px 46px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
}

nav {
  position: fixed;
  width: 100%;
  line-height: 60px;
  z-index: 5000;
  text-decoration: none;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: rgb(32, 32, 32);
}

nav ul li {
  display: inline-block;
  padding: 16px 40px;;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}

@media(min-width:1025px){

nav ul li a:hover { COLOR: white; TEXT-DECORATION: none; font-weight: bold; transition: width .3s ease-in-out;}

nav ul li a:after{ 
  content: "";
  position: absolute;
  right:0;
  top: 100%;
  width: 0px;
  height: 2px;
  background-color: #FD3C3D;
  transition: width .3s ease-in-out;}

nav ul li a:hover:after {width: 40%;}

}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: rgb(32, 32, 32);
  text-align: right;
  box-sizing: border-box;
  padding: 10px 24px 0px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

@media(max-width: 1025px) {
 
  .logo {
    position: fixed;
    top: 0;
    margin-top: 1px;
    margin-left: -1px;
  }

  nav ul {
    max-height: 0px;
    background: rgb(32, 32, 32);
  }

  nav.black ul {
    background: rgb(32, 32, 32);
  }

  .showing {
    max-height: 34em;
  }

  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 0px 24px 0px 24px;
    text-align: left;
  }

  .menu-icon {
    display: block;
  }

  nav ul li a:hover { COLOR: white; text-decoration: none;}
}


.demo{
height:1000px;
background-color:blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


 <nav>
            <div class="menu-icon">
                <i class="fa fa-bars fa-2x"></i>
            </div>
            <div class="logo">
                <img src="../img/logo.png" style="height:60px;" alt="">
            </div>
            <div class="menu">
                <ul>
                    <li><a href="../index.html">Home</a></li>
                    <li><a href="team.html">Link#2</a></li>
                    <li>
                        <div class="dropdown">
                          <button class="btn btn-secondary dropdown-toggle" type="button" 
                            id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" 
                            aria-expanded="false">
                            Dropdown button
                          </button>
                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                          </div>
                        </div>
                      </li>
                    <li><a href="blog.html">Link#4</a></li>
                    <li><a href="cont.html">Link#5</a></li>
                </ul>
            </div>
        </nav>
      <div class="demo">  
        </div>

Answer 1

您还必须导入popper.js和bootstrap.js。

检查此链接：https://getbootstrap.com/docs/4.3/getting-started/introduction/

编辑：由于您的奇怪的自定义（CSS），您看不到下拉菜单的内容。

在一个最小的例子中，下拉列表可以正常工作：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

                        <div class="dropdown">
                          <button class="btn btn-secondary dropdown-toggle" type="button" 
                            id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" 
                            aria-expanded="false">
                            Dropdown button
                          </button>
                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                          </div>
                        </div>

下拉列表未显示在导航栏中

1 个答案: