为什么底部的 3 个下拉项不起作用？

Question

我正在使用 Bootstrap 3.3.6，但无法弄清楚为什么底部的 3 个下拉项不起作用。 当我切换项目的顺序时，结果保持不变，只有前 2 个项目有效。

 function myFunction(el) { console.log(el); }

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="styleNew6.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <script src="js/popup.js"></script> <link rel="stylesheet" href="https://use.typekit.net/omo2zlt.css"> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"> <link rel="icon" type="image/png" href="fav.png"> <:-- MENU --> <div class="col-lg-11 col-md-11 col-sm-10 col-xs-9"> <div class="nav"> <a href="#"><img src="https.//via.placeholder:com/150" width="133px" data-aos="fade-in" data-aos-duration="2000" data-aos-delay="250"></a> </div> </div> <div class="col-lg-1 col-md-1 col-sm-2 col-xs-3"> <div class="dropdown show justify-content-end" data-aos="fade-in" data-aos-duration="2000" data-aos-delay="250"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <div class="container" onclick="myFunction(this)"> <div class="bar1">_</div> <div class="bar2">_</div> <div class="bar3">_</div> </div> </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a href="#about" class="dropdown-item">About</a><br><br> <a href="#EPK" class="dropdown-item">EPK</a><br><br> <a href="#service" class="dropdown-item">Services</a><br><br> <a href="#clients" class="dropdown-item">Clients</a><br><br> <a href="#contact" class="dropdown-item">Contact</a><br><br> </div> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>