將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菜單更改爲多列

回答

相關問題