jquery - 更改导航菜单类并在滚动或单击时显示子树菜单

Question

我在创建侧边栏菜单之后，当您单击或滚动时会显示子菜单，类似于此处的 Bootstrap 菜单:-

http://getbootstrap.com/css/#overview

我有以下内容: http://jsfiddle.net/Dxtyu/140/

但我不确定如何获得与 Bootstrap 菜单相同的效果，它会在滚动或单击时显示子菜单。

有没有办法用我拥有的代码将其添加到 fiddle 中，或者我是否需要为此使用插件？

<div class="m1 menu">
<div id="menu-center">
    <ul>
        <li><a class="active" href="#home">Home</a>

        </li>
        <li><a href="#portfolio">Portfolio</a>

        </li>
        <li><a href="#about">About</a>

        </li>
        <li><a href="#contact">Contact</a>

        </li>
    </ul>
</div>
</div>
 <div id="home"></div>
 <div id="portfolio"></div>
 <div id="about"></div>
 <div id="contact"></div>

谢谢

Answer 1

也许这对你有帮助... 首先你需要一个子菜单:

<li><a href="#about">About</a>
    <ul><li>SUB</li></ul>
</li>

然后是这样的:

.menu ul ul {
    display:none;
}
.menu ul li.active ul {
    display:block;
}

并在 <li> 上激活设置, 不是 <a>

$(this).parent().addClass('active');

这里是 fiddle ，只是快速而肮脏地展示: http://jsfiddle.net/9R6cH/