引导程序崩溃不与李一起工作

Question

I searched for many question/ forums for implementing Bootstrap Collapse & below is the code I wrote for it :

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

This turns out to be like this :

Without expanding sub-items It seems to be working fine

but When I expand it :

First one is coming fine, but when expanded it overlaps another lis. Instead it should work like a collapse/accordion. It seems to be I am doing some silly mistake in my code. Please suggest..!

Answer 1

The following is simple example for accordion widget using Twitter Bootstrap collapsible components:

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