如何创建可折叠下拉菜单？

Question

我需要创建可折叠的下拉菜单，如下图所示。当用户单击选项组标题时，它应按照所附图像打开并折叠。请帮助我。

谢谢。

Answer 1

这是一个样本-

@media only screen and (min-width : 992px) {
        .mtop {margin-top:20px;}
        .menu-ico-collapse {
            font-size: 8px;
            margin-left: 2px;
            float: none;
        }


        /* MAIN MENU */
            #mainmenu {font-size: 12px;}  

            #mainmenu {
                background: #333;
                height: 50px;
            }

            .pos-absolute {
                position: absolute;
                border-left: 2px solid #87a237;
                z-index: 999;
            }
            .menu-ico-collapse {
                font-size: 8px;
                margin-left: 2px;
            }

            #mainmenu .list-group {
              margin-bottom: 20px;
              padding-left: 0;
              float: left;
              display: inline;
            }
            #mainmenu .list-group-item {
              display: block;
              height: 50px;
              margin-bottom: -1px;
              background-color: #333;
              border: 0;
              line-height: 27px;
            }
            #mainmenu .list-group-item:first-child {
              border-top-right-radius: 0;
              border-top-left-radius: 0;
            }
            #mainmenu .list-group-item:last-child {
              margin-bottom: 0;
              border-bottom-right-radius: 0;
              border-bottom-left-radius: 0;
            }
            #mainmenu .list-group-item > .badge {
              float: right;
            }
            #mainmenu .list-group-item > .badge + .badge {
              margin-right: 5px;
            }
            #mainmenu a.list-group-item {
              color: #fff;
              font-weight: normal;
              border: 0;
              border-right: 1px solid #7c7c7c;
                -webkit-transition: background-color 100ms linear;
                -moz-transition: background-color 100ms linear;
                -o-transition: background-color 100ms linear;
                -ms-transition: background-color 100ms linear;

            }
            #mainmenu a.list-group-item .list-group-item-heading {
              color: #333333;
            }
            #mainmenu a.list-group-item:hover,
            #mainmenu a.list-group-item:focus {
              text-decoration: none;
              background-color: #87a237;
            }
            #mainmenu a.list-group-item.active,
            #mainmenu a.list-group-item.active:hover,
            #mainmenu a.list-group-item.active:focus {
              z-index: 2;
              color: #ffffff;
              background-color: #87a237;
              border: 0;
            }

            #mainmenu .panel {
              margin-bottom: 20px;
              background-color: #ffffff;
            border: 0;
              border-radius: 0px;
              -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
              box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
            }
            /* MAIN MENU end */
        }


<div class="container">
 id="mainmenu" class="row">
          <div class="list-group panel visible-md visible-lg">
              <a href="#" class="list-group-item"><i class="glyphicon glyphicon-home"></i></a>
          </div>
          <div class="list-group panel">
            <a href="#menupos1" class="list-group-item" data-toggle="collapse" data-parent="#mainmenu">Pos1 <span class="menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
            <div class="collapse pos-absolute" id="menupos1">
              <a href="#submenu1" class="list-group-item sub-item" data-toggle="collapse" data-parent="#submenu1">SubPos1 <span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
                  <div class="collapse list-group-submenu" id="submenu1">
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos1</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos2</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos3</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos4</a>
                  </div>
             <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">SubPos2</a>
             <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">SubPos3</a>
             <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">SubPos4</a>
             <a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">SubPos5</a>                                                                    
              </div>
            </div>

</div>
</div>

Answer 2

如果您要对项目进行分组，我建议您使用bootstrap-select

它在这里Bootstrap-select

Answer 3

使用引导框架添加了示例。