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

您可以随意编辑它，但仍然可以获得相同的功能。

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

1 个答案: