Jquery 移动滑入菜单子面板切换不工作

H,， 我一直在做下面的移动汉堡菜单，虽然它可以在桌面视图的缩小窗口中工作，但在实际的移动屏幕上却不起作用。在菜单滑入视图后，单击菜单项不会显示子菜单项。滑动切换在移动设备上不起作用会有什么问题？提前谢谢你

HTML:

试试这个：

HTML:

---

您可以随心所欲地编辑它，但仍然可以获得相同的功能。

对于初学者来说，您的

标记应该是这样的：

在href中添加英镑符号并不能解决切换问题。

 <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>

$(document).ready(function() { 

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

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

});

<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>

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