将slideDown菜单更改为多列

这就是我所得到的。将slideDown菜单更改为多列

http://jsfiddle.net/0bm9vf1y/

它工作得很好，但一直计划突然改变，我必须改变它的工作方式。

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

enter image description here

我已经找了一个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(); 
});

来源

2015-02-10 Cheng Zhaa

定义子菜单中单独div的唯一ID的，与子项。

先在每列中放置div。

使它们显示/隐藏父项。

你需要添加一些div到你的html中以放置子项并切换它们。

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

来源

2015-02-10 10:13:37 radbyx

谢谢，但我不认为我能够从头开始自己做。你没有示例/演示吗？我不认为这是以前从未做过的事情，但我已经用Google搜索，Google搜索并发现了......没有任何东西！（ – 2015-02-10 11:34:15

）在默认隐藏的另一个div中包装子项目（

Item 1-A

Item 1-B

）当按下“Item 1”时div和子项记住还要添加一个新的“ul”beteen div和li's – radbyx 2015-02-10 12:09:51

换句话说，你已经具备了功能，但需要在其他地方展示它，为此你需要一些div来显示对不起，我现在只能以某种方式引导你，并为你/其他人提供帮助 – radbyx 2015-02-10 12:11:23

将slideDown菜单更改为多列

回答

相关问题