所以我使用bootstrap collapse来创建一个手风琴列表。就我而言，代码是正确的，因为它适用于我迄今为止尝试过的任何在线编辑器。
<div id="menu" style="max-width: 600px;">
<div class="panel list-group">
<a class="list-group-item" data-toggle="collapse" data-target="#s1" data-parent="#menu" style="font-weight: bold; padding-left: 1.5px;">
<span class="well well-sm bs-accordion-left-number">1</span><span class="bs-accordion-title">Test 1</span><span class="pull-right">10</span></a>
<div id="s1" class="sublinks collapse">
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> test1</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> test2</a>
</div>
<a class="list-group-item" data-toggle="collapse" data-target="#s2" data-parent="#menu" style="font-weight: bold; padding-left: 1.5px;">
<span class="well well-sm bs-accordion-left-number">2</span><span class="bs-accordion-title">Test 2</span><span class="pull-right">10</span></a>
<div id="s2" class="sublinks collapse">
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> test1</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> test2</a>
</div>
<a class="list-group-item" data-toggle="collapse" data-target="#s3" data-parent="#menu" style="font-weight: bold; padding-left: 1.5px;">
<span class="well well-sm bs-accordion-left-number">3</span><span class="bs-accordion-title">Test 3</span><span class="pull-right">10</span></a>
<div id="s3" class="sublinks collapse">
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> test1</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> test2</a>
</div>
<a class="list-group-item" data-toggle="collapse" data-target="#s4" data-parent="#menu" style="font-weight: bold; padding-left: 1.5px;">
<span class="well well-sm bs-accordion-left-number">4</span><span class="bs-accordion-title">Test 4</span><span class="pull-right">10</span></a>
<div id="s4" class="sublinks collapse">
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> test1</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> test2</a>
</div>
<a class="list-group-item" data-toggle="collapse" data-target="#s5" data-parent="#menu" style="font-weight: bold; padding-left: 1.5px;">
<span class="well well-sm bs-accordion-left-number">5</span><span class="bs-accordion-title">Test 5</span><span class="pull-right">10</span></a>
<div id="s5" class="sublinks collapse">
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> test1</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> test2</a>
</div>
<a class="list-group-item" data-toggle="collapse" data-target="#s6" data-parent="#menu" style="font-weight: bold; padding-left: 1.5px;">
<span class="well well-sm bs-accordion-left-number">6</span><span class="bs-accordion-title">Test 6</span><span class="pull-right">10</span></a>
<div id="s6" class="sublinks collapse">
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> test1</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> test2</a>
</div>
</div>
</div>
问题在于，当手风琴关闭（高度减小）时，它会立即关闭，而当它打开（高度增加）时，它会跟随过渡属性（就像它应该的那样）。我知道问题出在我的网站的某个地方（我正在使用带有自定义模板的CMS，其中包含可能会干扰的自定义样式。我希望有人指出我正确的方向来找到这个错误发生的位置。
以下是在线编辑器和个人网站上使用Chrome的Inspect Element Tool的截图：
http://imgur.com/a/0qyKG