Javascript JS下拉菜单被隐藏？还是不工作？

在彻底解决了这个问题后，我需要一些帮助

我正在尝试制作一个网站，它有一个导航栏（用引导程序制作），我正在制作一个小屏幕下拉菜单（我还没有添加这个功能，我只是想让它先工作）。我也还没有做很多样式

问题是，我知道我的按钮和代码正在工作（因为我有一个显示它工作），但在我的网站上，我看不到下拉菜单。我不知道它是不是藏起来了，但我就是搞不清楚

这是HTML（因为我必须放一些东西…）：

菜单

我已经尝试过z-index（在很多地方，但如果你有建议，请随意提出，我会尝试）。我已经把菜单从导航栏中拿了出来（我想这与此有关）。但大多数情况下，我只是感到困惑——没有其他东西真正回答了我关于菜单问题的问题。我觉得有些小事情我忽略了，我就是想不出来

---

这里有一把小提琴，显示了我的网站的基本轮廓，但菜单不起作用：

你的HTML中有多个错误，例如

菜单

关于我们
我们都在关注切达干酪
会见团队
团队的照片放在这里
我们的工作
图片放在这里
T恤预览
T恤的图片放在这里

联系我们
社交媒体链接和联系我们表格

您的HTML中存在多个错误，例如

菜单

关于我们
我们都在关注切达干酪
会见团队
团队的照片放在这里
我们的工作
图片放在这里
T恤预览
T恤的图片放在这里

联系我们
社交媒体链接和联系我们表格

我注意到了几件事：

• 您正在使用jQuery，但没有定义要加载的jQuery。如果您执行“inspect元素”，您将看到未定义$
• 你也少了几个潜水舱，还有一个锚没有关上
• 如果您打算采用这种方法，我建议您只使用纯jQuery——这是一个非常简单的示例。这是您更新的小提琴-请注意切换动画效果很好：）

/*global$*/
$（文档）.ready（函数（）{
//使马赛头适合整个屏幕
$（“#报头”）.css（“最小高度，$（窗口）.height（））；
//移动菜单按钮折叠
$（.dropBtn”）。在（“单击”，函数（）上{
$（“#dropCollapse”）。切换（“显示”）；
});
//如果用户在下拉菜单外单击，请关闭下拉菜单
//jquery的更新
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropBtn'））{
var dropdowns=document.getElementsByClassName（“dropdownContent”）；
对于（变量i=0；i

我注意到了几件事：

• 您正在使用jQuery，但没有定义要加载的jQuery。如果您执行“inspect元素”，您将看到未定义$
• 你也少了几个潜水舱，还有一个锚没有关上
• 如果您打算采用这种方法，我建议您只使用纯jQuery——这是一个非常简单的示例。这是您更新的小提琴-请注意切换动画效果很好：）

/*global$*/
$（文档）.ready（函数（）{
//使马赛头适合整个屏幕
$（“#报头”）.css（“最小高度，$（窗口）.height（））；
//移动菜单按钮折叠
$（.dropBtn”）。在（“单击”，函数（）上{
$（“#dropCollapse”）。切换（“显示”）；
});
//如果用户在下拉菜单外单击，请关闭下拉菜单
//jquery的更新
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropBtn'））{
var dropdowns=document.getElementsByClassName（“dropdownContent”）；
对于（变量i=0；i

In

<div class = "dropdown">
    <button onclick = "menuBtn ()" class = "dropBtn">Menu</button>
    <div id = "dropCollapse" class = "dropdownContent">
        <a class = "contentLinks" href = "#about">About</a>
        <a class = "contentLinks" href = "#team">Team</a>
        <a class = "contentLinks" href = "#photos">Photos</a>
        <a class = "contentLinks" href = "#shirts">T-Shirts</a>
        <a class = "contentLinks" href = "#contact">Contact</a>
    </div>
</div>

/* global $ */
$(document).ready(function() {

  //makes the masethead fit the whole screen
  $("#masthead").css("min-height", $(window).height());

  //mobile menu button collapse
 $(".dropBtn").on("click", function(){
    $("#dropCollapse").toggle("show");
});

  // Close the dropdown menu if the user clicks outside of it
  //update to jquery
  window.onclick = function(event) {
    if (!event.target.matches('.dropBtn')) {

      var dropdowns = document.getElementsByClassName("dropdownContent");
      for (var i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  };

});