展开导航菜单点击

Question

我有一个菜单，工作很好，除了我无法打开点击使用JQuery的事实。这在悬停时工作正常，但我也希望点击手机和平板电脑时可以打开菜单。我可能做了一些愚蠢的事情，但无法弄清楚问题所在。我重视工作的例子和下面的小提琴：

https://jsfiddle.net/qby38c3o/6/

HTML：

<div class="nav"> 
<div class ="navWrapper"> 
<nav role="navigation" class="menu"> 
    <ul class="navList"> 
     <li><a href="#">NavMenu1</a></li> 
     <li><a href="#">NavMenu2</a></li> 
     <li> 
     <a href="#">NavMenu4</a> 
      <ul class="submenu"> 
       <li><a href="#">Sub1</a></li> 
       <li><a href="#">Sub2</a></li> 
       <li><a href="#">Sub3</a></li> 
       <li><a href="#">Sub4</a> 
        <ul class="subSubmenu"> 
         <li><a href="#">SubSub1</a></li> 
         <li><a href="#">SubSub2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</nav> 
</div> 
</div> 

CSS：

.nav 
{ 
    background-color: blue; 
    z-index: 1; 
} 

.navWrapper 
{ 
    display: flex; 
    justify-content: flex-start; 
    flex-wrap: wrap; 
    flex-direction: column; 
    flex-grow: 1; 
    max-width: 1366px; 
    width:100%; 
    margin:auto; 
} 

/*HORIZONTAL MENU*/ 
.menu 
{ 
    flex-grow: 1; 
    width: 100%; 
} 

.menu ul.navList 
{ 
    display:flex; 
    width: 100%; 
    flex-direction: row; 
    flex-wrap: wrap; 
    position: static; 
} 

.menu ul li 
{ 
    position: relative; 
} 

.menu > ul > li > a 
{ 
    text-align: left; 
    display:block; 
    color: white; 
    padding:16px 16px 12px 16px; 
    border-bottom:4px solid transparent; /*To offset white underline hover*/ 
    font-weight: 700; 
} 

.menu > ul > li a:hover 
{ 
    background-color: red; 
    border-bottom: 4px solid #F1F227; 
    color: white; 
    transition: 1s ease-out; 
} 

/*Sub Menu*/ 
.menu > ul > li:hover > ul 
{ 
    display: block; 
} 

.submenu 
{ 
    display:none; 
    position:absolute; 
    background-color: blue; 
    white-space: nowrap; 
    min-width : 100%; 
    list-style-type: none; 
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4); 
} 

.submenu > li > a 
{ 
    text-align: left; 
    display:block; 
    color: #fff; 
    padding:16px 16px 12px 26px; 
    border-bottom:4px solid transparent; /*To offset white underline hover*/ 
    font-weight: 500; 
} 

.submenu > li:hover > a 
{ 
    background-color: #062c6b; 
    color: #FFDB00; 
    border-bottom: 4px solid #F1F227; 
    transition: 1s ease-out; 
} 

/*Child Sub Menu*/ 
.menu > ul > li > ul > li:hover > ul 
{ 
    display: block; 
} 

.subSubmenu 
{ 
    display:none; 
    position:absolute; 
    background-color: blue; 
    white-space: nowrap; 
    min-width: 100%; 
    list-style-type: none; 
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4); 
    left: 100%; 
    top: 0; 
    bottom:auto; 
} 

.subSubmenu > li > a 
{ 
    text-align: left; 
    display:block; 
    color: #fff; 
    padding:19px 16px 12px 36px; 
    border-bottom:4px solid transparent; /*To offset white underline hover*/ 
    font-weight: 300; 
} 

.menu > ul > li > ul > li:hover > ul > li:hover > a 
{ 
    background-color: red; 
    color: #C5EFF7; 
    border-bottom: 4px solid #F1F227; 
    transition: 1s ease-out; 
} 

JQuery的：

jQuery(document).ready(function() { 
clickNav(); 
activeNav() 

function activeNav(e) { 
var url = window.location.href; 
$(".menu ul li a").each(function() { 
if (url == (this.href)) { 
$(this).closest("li").addClass("active"); 
} 
}); 

e.preventDefault(); 
} 

function clickNav(e) { 
var submenu = $(this).children('.submenu'); 
$('.menu ul .submenu').parent().click(function() { 
if ($(submenu).is(':hidden')) { 
$(submenu).slideDown(200); 
} else { 
$(submenu).slideUp(200); 
} 
}); 

e.preventDefault(); 
     } 
}); 

Answer 1

有一个几个错误接受你的代码。

1）你忘了在你的小提琴中包含jQuery。在这里你需要包括它：

2）e.preventDefault();是在你的代码错了地方;它在你的document.ready函数中，而不是click函数。

3）不是将submenu定义为变量，而是使用$(this)。

4）您的e（来自e.preventDefault()）被定义在错误的地方。

这应该工作：

jQuery(document).ready(function() { 
    clickNav(); 

    function clickNav() { 
      $('.menu ul .submenu').parent().click(function (e) { 
      if ($(this).children('.submenu').is(':hidden')) { 
       $(this).children('.submenu').slideDown(200); 
      } else { 
       $(this).children('.submenu').slideUp(200); 
      } 

      e.preventDefault(); 
     }); 
    } 
}); 

这里有一个fiddle。