将slideDown菜单更改为多列

Question

这就是我所拥有的。

http://jsfiddle.net/0bm9vf1y/

它工作正常，但计划突然改变，我必须改变它的工作方式。

我希望保持相同的行为（slideUp / slideDown），但不是在其各自菜单下方向下滑动的子菜单，我需要它们在第二列上向下滑动。我实际上至少会有3列，但行为是一样的。

我已经找了一个jQuery插件但找不到任何类似的东西。

有人知道吗？或者简单地解决我目前的状况......

感谢。

HTML：

<ul class="menu">
  <li>Item 1</li>
  <li class="submenu">Item 1-A</li>
  <li class="submenu">Item 1-B</li>
</ul>
<ul class="menu">
  <li>Item 2</li>
  <li class="submenu">Item 2-A</li>
  <li class="submenu">Item 2-B</li>
</ul>
<ul class="menu">
  <li>Item 3</li>
  <li class="submenu">Item 3-A</li>
  <li class="submenu">Item 3-B</li>
  <li class="submenu">Item 3-C</li>
  <li class="submenu">Item 3-D</li>
</ul>
<ul class="menu">
  <li>Item 4</li>
  <li class="submenu">Item 4-A</li>
  <li class="submenu">Item 4-B</li>
</ul>

CSS：

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

JS：

  $('.submenu').hide();
  $('.menu').on('click', function(){
    if(!($(this).children('.submenu').is(':visible'))){
      $('.submenu').slideUp();
      $(this).children('.submenu').slideDown();
    } else {
      $('.submenu').slideUp();
    }
  });
$('.submenu').on('click', function(e){
  e.stopPropagation();
});

Answer 1

使用唯一ID来定义具有子项的单独div中的子菜单。

首先将div放在每列中。

让它们显示/隐藏父项目。

您需要在html中添加一些div来放置子项并切换它们。

希望这可以帮助你重回正轨，我现在没有太多时间，也许更晚。