如何实现从右侧滑入的多级ul li横向滑动菜单

我有一个嵌套结构的ul/li菜单，想要实现类似移动端菜单的点击切换效果：点击菜单项后，对应的.submenu子菜单从右侧滑入并替换上一级菜单。当前HTML结构如下：

<ul class="list-style-none">
   <li class="li-select">
      <div class="row">
         <div class="col-md-8">
            Toys
         </div>
         <div class="col-md-4 text-right"><i class="w-icon-angle-right li-select"></i></div>
      </div>
      <ul class="submenu">
         <li class="li-select">
            <div class="row">
               <div class="col-md-8">
                  Baby Toys and Scrabbles
               </div>
               <div class="col-md-4 text-right"><i class="w-icon-angle-right li-select"></i></div>
            </div>
            <ul class="submenu">
               <li class="li-select">
                  <div class="row">
                     <div class="col-md-8">
                        Used Baby Toys and Scrabbles
                     </div>
                     <div class="col-md-4 text-right"><i class="w-icon-angle-right li-select"></i></div>
                  </div>
                  <ul class="submenu">
                     <li class="li-select">
                        <div class="row">
                           <div class="col-md-8">
                              Cheap Toys
                           </div>
                           <div class="col-md-4 text-right"><i class="w-icon-angle-right li-select"></i></div>
                        </div>
                     </li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
   <li class="li-select">
      <div class="row">
         <div class="col-md-8">
            Cars
         </div>
         <div class="col-md-4 text-right"><i class="w-icon-angle-right li-select"></i></div>
      </div>
      <ul class="submenu">
         <li class="li-select">
            <div class="row">
               <div class="col-md-8">
                  Jeep
               </div>
               <div class="col-md-4 text-right"><i class="w-icon-angle-right li-select"></i></div>
            </div>
            <ul class="submenu">
               <li class="li-select">
                  <div class="row">
                     <div class="col-md-8">
                        Used jeep
                     </div>
                     <div class="col-md-4 text-right"><i class="w-icon-angle-right li-select"></i></div>
                  </div>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

现有jQuery代码只能实现上下滑动切换，不符合需求：

$('.li-select').on('click', function(e){
    $(this).closest('li').find('ul.submenu').first().slideToggle("fast");
});

解决方案 #

要实现右侧滑入替换的效果，需要结合CSS定位+过渡动画，同时修改jQuery逻辑来控制菜单的显示/隐藏层级：

1. 添加CSS样式 #

给菜单容器和子菜单设置基础布局与动画效果：

/* 菜单容器：限制宽度、溢出隐藏、相对定位 */
.list-style-none {
    position: relative;
    width: 100%;
    max-width: 300px;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 菜单项：宽度100%、相对定位 */
.list-style-none > li,
.submenu > li {
    position: relative;
    width: 100%;
}

/* 子菜单：默认移出可视区域，添加过渡动画 */
.submenu {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
}

/* 激活状态：子菜单滑入可视区域 */
.submenu.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

/* 隐藏上一级菜单：配合子菜单激活时的视觉替换 */
.menu-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

2. 优化HTML与修改jQuery代码 #

先给每个子菜单添加返回按钮（提升用户体验），在每个.submenu的开头插入：

<li class="li-select back-btn">
    <div class="row">
        <div class="col-md-8">← 返回</div>
        <div class="col-md-4 text-right"></div>
    </div>
</li>

然后修改jQuery逻辑，实现层级切换与返回功能：

$('.li-select').on('click', function(e) {
    e.stopPropagation();
    const $currentLi = $(this).closest('li');
    const $submenu = $currentLi.find('ul.submenu').first();

    // 处理返回按钮逻辑
    if ($(this).hasClass('back-btn')) {
        const $parentMenu = $currentLi.closest('.submenu');
        const $parentLi = $parentMenu.closest('li');
        
        $parentMenu.removeClass('active');
        $parentLi.removeClass('menu-hidden');
        return;
    }

    // 处理子菜单展开逻辑
    if ($submenu.length > 0) {
        $currentLi.addClass('menu-hidden');
        $submenu.addClass('active');
    }
});

内容的提问来源于stack exchange，提问作者Kjobber