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

Question

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

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

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

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

有没有办法将这个添加到我的代码中，或者我需要一个插件吗？

<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');

这里是小提琴，只是快速而肮脏的显示： http://jsfiddle.net/9R6cH/

Answer 2

Bootstrap的示例使用scrollspy的变体（affix）

http://getbootstrap.com/javascript/#scrollspy

您可以通过监控activate.bs.scrollspy事件来创建所需的效果。

当该事件触发时，您可以使用事件对象中提供的target来确定要在菜单中展开的内容。然后，您需要在子菜单上添加/删除.hidden类。

这是一个bootply，向您展示如何捕获事件： http://bootply.com/112361

另外，您会注意到您的（好）滚动检测方法也是scrollspy的重复。