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

Question

H, 我一直在研究以下移动汉堡包菜单，虽然它在桌面视图中以较小的 window 工作，但在实际的移动屏幕上不起作用。菜单滑入视图后，菜单项不会在单击时显示子菜单项。在移动设备上不起作用的 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");
    });
  }
});

您可以随心所欲地对其进行编辑，并且仍然可以获得相同的功能。

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

Mobile slide in menu sub panel toggle not working

mobile

jquery

menu

toggle

slide