展開導航菜單點擊

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。