响应式导航栏下拉菜单仅在悬停时打开而不是单击

Question

我正在使用 flexbox 创建响应式导航菜单，问题是菜单选项带有下拉菜单，当我将鼠标悬停在小屏幕上时，下拉菜单会显示，而我希望它仅在移动设备上单击时显示（因为悬停未在移动设备上注册 afaik）。

https://imgur.com/a/fDgVu95

这是我使用 jquery 的代码：

$(document).ready(function(){
	$(".nav_dropdown").click(function(e){
	  e.preventDefault();
      $(this).nextAll('.nav_dropdown_contents:first').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;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav_maincontainer" style="">
    <a class="nav_menu_toggle" href="" onclick="">
        <span class="nav_menu_text">Menu</span>
        <i class="fa fa-bars"></i>
    </a>
    <a class="nav_link" href="/home" style="">Home</a>
    <a class="nav_link" href="/home" style="">Service</a>
    <a class="nav_link" href="/home" style="">Courses</a>
    <div class="nav_dropdown" style="">
        <a href="" class="nav_link" style="">Dropdown 
            <i class="fa fa-caret-down" style=""></i>
        </a>
        <div class="nav_dropdown_contents" style="">
            <a class="nav_dropdown_link" href="#" style="">Dropdown Link 1</a>
            <a class="nav_dropdown_link" href="#" style="">Dropdown Link 1</a>
            <a class="nav_dropdown_link" href="#" style="">Dropdown Link 1</a>
        </div>
    </div>
    <a class="nav_link" href="/home" style="">Contact</a>
</div>

Answer 1

我认为问题出在您的 nextAll() 上，因为您的目标是子元素，而不是兄弟姐妹。 jQuery：

$(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');
    });





});

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

.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;}

https://jsfiddle.net/onxcx0r4/3/

Answer 2

您的 CSS 存在一些需要修复的问题。在需要修复的地方添加了 cmets。

.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 网格系统和可能的 Bootstrap 4。

关注https://getbootstrap.com/docs/4.1/components/navs/

希望这会有所帮助。