Jquery 响应导航栏下拉列表仅在悬停时打开，而不是单击

我正在使用flexbox创建一个响应导航菜单，问题是菜单选项带有一个下拉菜单，当我将鼠标悬停在小屏幕上时，下拉菜单会显示出来，而我只想在单击手机时显示它（因为鼠标悬停未在手机afaik上注册）

这是我使用jquery时的代码：

$（文档）.ready（函数（）{
$（“.nav_下拉列表”）。单击（函数（e）{
e、 预防默认值（）；
$（this）.nextAll（'.nav_dropdown_contents:first'）.toggleClass（'visible'）；
});
$（“.nav_菜单_切换”）。单击（功能（e）{
e、 预防默认值（）；
$（'.nav_link'）。toggleClass（'visible'）；
});
});
.nav_主容器{宽度：100%；高度：50px；显示：柔性；对齐项目：中心；填充：0px 100px；背景色：#004771；位置：相对；}
.nav_链接{字体大小：17px；填充：0px 30px；颜色：白色；显示：柔性；对齐内容：中心；对齐项目：中心；高度：100%；宽度：自动；}
.nav_链接：第一个子项{右边距：自动；}
.nav_链接：第n个子（3）{左边距：自动；}
.nav_下拉列表{宽度：自动；高度：100%；位置：相对；}
.nav_下拉菜单{字体大小：17px；填充：0px 30px；颜色：白色；高度：100%；}
.fa插入符号向下{颜色：白色；字体大小：10px；左边距：5px；}
.nav_下拉菜单_内容{显示：无；最小宽度：200px；弯曲方向：列；高度：自动；位置：绝对；顶部：100%；左侧：0px；}
.nav_下拉链接{填充：15px 10px；背景色：383838；字体大小：15px；颜色：白色；边框底部：1px实心rgba（255255255,0.2）；}
.nav_菜单_切换{字体大小：20px；颜色：白色；显示：无；宽度：50px；高度：50px；}
.nav_下拉列表：悬停.nav_下拉列表内容{display:flex；}
.nav_链接：悬停{背景色：#072060；}
@仅介质屏幕和（最大宽度：736px）
{
.nav_maincontainer{width:100%；height:auto；display:flex；flex direction:column；align items:center；padding:0px；背景色：#004771；位置：relative；}
.nav_链接{字体大小：16px；宽度：100%；高度：45px；显示：无；填充：0px 10px；对齐项目：中心；边框底部：1px实心rgba（255255,0.2）；对齐内容：柔性开始；颜色：白色；}
.nav_下拉列表{宽度：100%；高度：自动；位置：相对；}
.nav_下拉菜单{字体大小：16px；填充：0px 30px；颜色：白色；高度：100%；}
.fa插入符号向下{颜色：白色；字体大小：10px；左边距：自动；}
.nav_下拉菜单_内容{显示：无；最小宽度：100%；弯曲方向：列；高度：自动；字体大小：15px；位置：相对；顶部：0px；左侧：0px；}
.nav_下拉链接{填充：0px 10px；高度：45px；显示：柔性；对齐项目：中心；背景色：#383838；颜色：白色；边框底部：1px实心rgba（255255,0.2）；}
.nav_菜单_切换{宽度：100%；高度：45px；显示：柔性；对齐项目：中心；填充：10px；边框底部：1px实心rgba（255255,0.2）；}
.nav_菜单_文本{颜色：白色；右边距：自动；字体大小：16px；}
.fa条{颜色：白色；字体大小：20px；左边距：自动；}
.nav_下拉列表：悬停.nav_下拉列表内容{display:flex；}
.nav_链接：悬停{背景色：#072060；}
}
.flex{display:flex；}
.visible{display:flex；}
您的CSS有一些问题需要解决。添加了需要修复的注释

.nav_dropdown {
  width: auto;
  heigh: 100%; // Typo 
  position: relative;
}
.nav_menu_toggle {
  font-size: 20px;
  color: white;
  display: none;
  width: 50px;
  height: 50px;
  width: 100%; // Duplicate width
}
.nav_dropdown {
    width: 100%;
    heigh: auto; // Typo
    position: relative;
  }

设计解决方案一开始就没有响应性。“接触”选项位于视口外部，引入水平滚动。为了简单起见，我建议使用12个网格系统和可能的bootstrap4

照顾

希望这能有所帮助。
我认为问题出在你的nextAll（）上，因为你的目标是子元素，而不是兄弟元素。
jQuery：

CSS（我注释掉了悬停的内容，以便您可以更轻松地进行测试）：

感谢您注意到输入错误，但它们并没有真正改变任何东西，我仍然无法在单击时显示下拉列表，我也不明白为什么它没有响应，在更改屏幕大小时效果很好。我也听说过bootstrap，但我宁愿自己编写，因为我正在学习
$(document).ready(function(){
    $(".nav_dropdown").click(function(e){
      e.preventDefault();
      $(this).find('.nav_dropdown_contents').toggleClass('visible');
    });


    $(".nav_menu_toggle").click(function(e){
      e.preventDefault();
      $('.nav_link').toggleClass('visible');
    });





});

.nav_maincontainer{width:100%; height:50px; display:flex; align-items:center; padding:0px 100px; background-color:#004771; position:relative;}

.nav_link{font-size:17px; padding:0px 30px; color:white; display:flex; justify-content:center; align-items:center; height:100%; width:auto; }

.nav_link:first-child{margin-right:auto;}

.nav_link:nth-child(3){margin-left:auto;}

.nav_dropdown{width:auto; height:100%; position:relative;}

.nav_dropdown_btn{font-size:17px; padding:0px 30px; color:white; height:100%;}

.fa-caret-down{color:white; font-size:10px; margin-left:5px;}

.nav_dropdown_contents{display:none; min-width:200px; flex-direction:column; height:auto; position:absolute; top:100%; left:0px;}

.nav_dropdown_link{padding:15px 10px; background-color:#383838; font-size:15px; color:white; border-bottom:1px solid rgba(255,255,255,0.2);}

.nav_menu_toggle{font-size:20px; color:white; display:none; width:50px; height:50px; }

/* .nav_dropdown:hover .nav_dropdown_contents{ display:flex;} */

.nav_link:hover{background-color:#072060;}
@media only screen and (max-width: 736px) 
{
.nav_maincontainer{width:100%; height:auto; display:flex; flex-direction:column; align-items:center; padding:0px; background-color:#004771; position:relative;}

.nav_link{font-size:16px; width:100%; height:45px; display:none; padding:0px 10px; align-items:center; border-bottom:1px solid rgba(255,255,255,0.2); justify-content:flex-start; color:white;}

.nav_dropdown{width:100%; height:auto; position:relative;}

.nav_dropdown_btn{font-size:16px; padding:0px 30px; color:white; height:100%;}

.fa-caret-down{color:white; font-size:10px; margin-left:auto;}

.nav_dropdown_contents{display:none; min-width:100%; flex-direction:column; height:auto; font-size:15px; position:relative; top:0px; left:0px;}

.nav_dropdown_link{padding:0px 10px; height:45px; display:flex; align-items:center; background-color:#383838; color:white; border-bottom:1px solid rgba(255,255,255,0.2);}

.nav_menu_toggle{width:100%; height:45px; display:flex; align-items:center; padding:10px; border-bottom:1px solid rgba(255,255,255,0.2);}

.nav_menu_text{color:white; margin-right:auto; font-size:16px;}

.fa-bars{color:white; font-size:20px; margin-left:auto;}

/* .nav_dropdown:hover .nav_dropdown_contents{ display:flex;} */

.nav_link:hover{background-color:#072060;}      
}

.flex   {display:flex;}
.visible{display:flex;}