Bootstrap选项卡在下拉列表中不起作用

Question

所以这是我的代码：

<ul class="nav" data-tabs="tabs">
                 <li><a data-toggle="tab" href="#despre" >Despre Documentatie</a></li>
                <li><a data-toggle="tab" href="#constitutia" >Despre Documentatie</a></li>
                <li><a data-toggle="tab" href="#despre" >Despre Documentatie</a></li>
               <li class="dropdown">
                   <a href="#" data-toggle="collapse" data-target="#collapse1">Legis <b class="caret"></b></a>
                   <ul id="collapse1" class="collapse">
                       <li><a data-toggle="tab" href="#constitutia">Constitutia</a></li>
                       <li><a href="#">Conceptul de lege</a></li>
                       <li><a href="#">Hotararea</a></li>
                       <li><a href="#">Ordonanta</a></li>
                       </ul>
               </li>

<div class="tab-content" id="my-tab-content">
                <div role="tabpanel" class="tab-pane" id="constitutia">
        {% include 'juristdoc/legis/constitutia.html' %}
                    </div>
            <div role="tabpanel" class="tap-pane" id="despre">
                <div class="jumbotron">
                    <h1>Bine ati venit!</h1>
                    <p>Documentatia juridica este locul in care va puteti informa in legatura cu actualitati juridice.</p>
                </div>
            </div>
            </div>
    </div>

我添加了前3个li进行测试，他们正在来回切换，但在我点击折叠列表中的一个标签后，它无法正常工作。例如，如果我点击#despre然后点击下拉类中的#constitutia，它就可以了，但是如果我再次尝试来回切换它就不行了。