Visión general
El proyecto necesita usar una barra lateral secundaria. La implementación con Bootstrap3 es la siguiente (el código es un esquema, el embellecimiento depende de su propio estilo).
Código
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">
<a href="#" data-toggle="collapse" data-target="#details_rtu_param">终端参数</a>
<ul id="details_rtu_param" class="collapse in">
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>
<li role="presentation" class="active">
<a href="#" data-toggle="collapse" data-target="#details_net_param">网络通道参数</a>
<ul id="details_net_param" class="collapse in">
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>
<li role="presentation" class="active">
<a href="#" data-toggle="collapse" data-target="#private_line_param">专线通道参数</a>
<ul id="private_line_param" class="collapse in">
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>
<li role="presentation" class="active">
<a href="#" data-toggle="collapse" data-target="#details_dial_param">拨号通道参数</a>
<ul id="details_dial_param" class="collapse in">
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>
<li role="presentation" class="active">
<a href="#" data-toggle="collapse" data-target="#details_dial_param_standby">拨号通道参数(备)</a>
<ul id="details_dial_param_standby" class="collapse in">
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>
<li role="presentation" class="active">
<a href="#" data-toggle="collapse" data-target="#details_meter_param">表计参数</a>
<ul id="details_meter_param" class="collapse in">
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</li>
</ul>efecto
