bootstrap scrollspy collapse 做能收缩能自动展开的菜单_bootstrap 折叠后又自动显示-优快云博客

本文介绍如何使用Bootstrap实现可折叠的左侧菜单，并通过ScrollSpy实现在滚动到相应内容时自动展开对应菜单项的功能。文章提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要做一个collapse的左侧菜单

参考

http://twitter.github.io/bootstrap/javascript.html#collapse

例子中有accordion，accordion-group等class。加上去以后发现风格与我的页面有冲突。

实际上这个例子才是精髓：

<button  data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>
 
<div id="demo" class="collapse in" > … </div>

collapse需要两个元素。一个是标题，用来点击。一个是能收缩的内容。标题上加上data-toggle="collapse" 说明使用collapse功能。data-target指向要收缩的内容块。

另外class="collapse in"记录了当前状态，如果没有这个class，第一下点击会是展开动作。即使已经展开。

第二个问题：

这个菜单同时用了scrollspy。滚动到响应内容时。希望能自动展开。

解决办法：scrollspy在滚动到响应项时。该li项会自动增加叫做"activate"的class.并会触发activate事件。

我的代码如下

    $('.nav li').on("activate",function(){
      var $menu_section_head=$(this).parent();
      $menu_section_head.collapse('show');
    });

html如下

 <ul class="nav" id="sidemenu">
              <li class="navhead" data-toggle="collapse" data-target="#m_summary">t_summary</li>
              <div id="m_summary">
              <li class="active"><a href="#scan_summary">t_scan_summary</a></li>
              <li><a href="#resource_usage">t_resource_usage</a></li>
              <li><a href="#app_properties">t_app_properties</a></li>
              <li><a href="#developer_information">t_developer_information</a></li>
               <li><a href="#permissions">t_permissions</a></li>
             </div > <!--m_summary-->
            </ul>