クリックするとNavメニューが表示されます

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関数内であり、クリック関数ではありません。

3）submenuを変数として定義する代わりに、$(this)を使用してください。

4）あなたの（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です。