bootstrap崩溃不适用于li

Question

我搜索了很多问题/论坛来实现Bootstrap Collapse＆amp;下面是我为它写的代码：

<div class="navbar-collapse in" id="main-menu" style="background-color: rgb(248, 248, 248); height: auto;">
    <div class="zone zone-navigation" shape-id="7">                
    <article class="widget-MainMenu widget-navigation widget-menu-widget widget" shape-id="8">    
    <div class="nav navbar-nav menu menu-main-menu acc-navbar-menu" shape-id="9">
            <!-- For menu -->
    <li class="dropdown active first" shape-id="12">    
    <a href="/" class="dropdown-toggle" data-toggle="dropdown" shape-id="12">Home&nbsp;<i class="fa fa-angle-down" shape-id="12"></i></a>
                    <ul class="dropdown-menu" shape-id="12">
    <li shape-id="14">    
    <a href="/t2" class="submenu" shape-id="14">T2</a>
    </li>
    <li shape-id="16">
    <a href="/test1" class="submenu" shape-id="16">T1</a>
    </li>
    </ul>
    </li>
    <li shape-id="18">
    <a href="/team-blog-post" class="submenu" shape-id="18">Blog</a>
    </li>
    <li shape-id="20">
    <a href="/home" class="submenu" shape-id="20">Online Nexgen</a>
    </li>
    <li shape-id="22">
    <a href="/testpage1" class="submenu" shape-id="22">TestPage1</a>
    </li>
    <li class="last" shape-id="24">
    |<a href="/testpage2" class="submenu" shape-id="24">TestPage2</a>
    </li>
    </div>
    </article>    
    </div>
</div>

原来是这样的：

不扩展子项似乎工作正常

但是当我扩展它时：

第一个很好，但是当它扩展时它会重叠另一个lis。相反，它应该像崩溃/手风琴一样工作。好像我在代码中犯了一些愚蠢的错误。请建议..！

Answer 1

以下是使用Twitter Bootstrap可折叠组件的accordion小部件的简单示例：

<form>
<div style="margin: 20px; width: 200px;">
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Accordion Panel
                    1</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <p>
                    This is from Accordion Panel 1
                </p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Accordion Panel
                    2</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <p>
                    This is from Accordion Panel 2</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Accordion Panel
                    3</a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                <p>
                    This is from Accordion Panel 3</p>
            </div>
        </div>
    </div>
</div>
</div>
</form>