メニューサブパネルのモバイルスライドが動作しない

Question

H、 私は以下のモバイルハンバーガーメニューで作業していますが、小さな縮小ウィンドウでデスクトップビューでも動作しますが、実際のモバイル画面では機能しません。メニューがスライドして表示されると、メニュー項目はクリック時にサブメニュー項目を表示しません。 slideToggleでモバイルデバイスで動作しない問題は何ですか？前もって感謝します！

HTML：

<li class="nav-item mainMenu"> 
     <a href="" class="mainMenuTitle menuClosed">Menu Title 1</a> 
     <div class="sub-nav"> 
      <ul class="sub-nav-group"> 
       <li><a href="">Sub Item 1</a></li> 
       <li><a href="">Sub Item 2</a></li> 
       <li><a href="">Sub Item 3</a></li> 
       <li><a href="">Sub Item 4</a></li> 
      </ul> 
     </div> 
    </li> 
    <li class="nav-item mainMenu"> 
     <a href="" class="mainMenuTitle menuClosed">Menu Title 1</a> 
     <div class="sub-nav"> 
      <ul class="sub-nav-group"> 
       <li><a href="">Sub Item 1</a></li> 
       <li><a href="">Sub Item 2</a></li> 
       <li><a href="">Sub Item 3</a></li> 
       <li><a href="">Sub Item 4</a></li> 
      </ul> 
     </div> 
    </li> 

のjQuery：

$(document).ready(function() { 

    $('.sub-nav').hide(); 

    $(".nav-item a").click(function(){  
     $(this).next().slideToggle('normal'); 
     $(this).toggleClass('menuClosed menuOpened'); 
     return false; 
    }); 

}); 

Answer 1

これを試してみてください：

HTML：

<nav class="nav"> 
    <ul> 
    <li class="dropdown-toggle">Menu item 1 
     <ul class="sub-menu"> 
     <li>submenu item 1</li> 
     <li>submenu item 2</li> 
     </ul> 
    </li> 
    <li class="dropdown-toggle">Menu item 2 
     <ul class="sub-menu"> 
     <li>Submenu item 1</li> 
     <li>Submenu item 2</li> 
     </ul> 
    </li> 
    </ul> 
</nav> 

はJavaScript：

$(document).ready(function(){ 
    if($("li").children("ul")){ 
    $("li").children("ul").hide(); 
    $(".dropdown-toggle").click(function(){ 
     $(this).find("ul").slideToggle("normal"); 
    }); 
    } 
}); 

あなたは好きなように編集することはできますが、同じ機能が得られます。