Question

我有这个菜单：

      <div id="menu">
            <div class="header">Menu Header</div>
            <ul>
                <li>asdfsadfdsaf</li>
                <li>sadfsadf</li>
                <li>asdfasdf</li>
                <li>asdfsadf</li>
                <li>asdfsadf</li>
            </ul> 
         </div>

我该怎么做，所以每当我点击每个LI里面的一个链接时，一个新的子菜单会在点击的“下面”切换？

Answer 1

这是一个简单的菜单模式：

http://jsfiddle.net/Diodeus/jejNy/

Answer 2

首先，您需要不同的标记：

<div id="menu">
    <div class="header">Menu Header</div>
    <ul>
        <li>
            <span>Menu item</span>
            <ul>
                <li>Submenu item</li>
                <li>Submenu item</li>
                <li>Submenu item</li>
            </ul>
        </li>
        <li>
            <span>Menu item</span>
            <ul>
                <li>Submenu item</li>
                <li>Submenu item</li>
                <li>Submenu item</li>
            </ul>
        </li>
        ...
    </ul> 
</div>

简单地将css和js应用到子菜单，就像你使用mainmenu一样

切换菜单 - 点击子菜单 - jQuery / HTML

2 个答案: