Bootstrap implémente la barre latérale secondaire

Aperçu

Le projet doit utiliser une barre latérale secondaire. L'implémentation avec Bootstrap3 est la suivante (le code est un schéma, l'embellissement dépend de votre propre style).

Code

<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>

effet