菜单子面板中的移动幻灯片切换不起作用

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");
    });
  }
});

您可以根据自己的喜好对其进行编辑，并且仍然可以获得相同的功能。