Bootstrap手风琴行为扩展

Question

在示例中，我尝试显示问题，但它没有在那里进行，但那是我正在使用的代码。

使用bootstrap 3.3.1。 Bootstrap手风琴的第一部分有很多。当它打开并单击下一部分打开时，它将跳过页面。我改变了它，所以当下一个扩展时，这些部分不会崩溃，但这并没有纠正它。我留下了间隔内容，因为这是最明显的地方。

以下是我遇到此问题的示例网站http://sexypizzamarketing.com/#menu

如果您点击/打开开胃菜类别，然后点击打开甜点，它会跳出页面。我更改了它，因此当打开另一个部分时，这些部分不会自动折叠，但这不会“修复”它。

理想情况下，部分标题将保留在原位，内容将向下扩展。它目前似乎向下扩展并向上滑动。

有人能指出我正确的方向吗？

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"    
    aria-expanded="true" aria-controls="collapseOne">
      Appetizers
                </a>
            </h4>
        </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" 
      aria-labelledby="headingOne">
        <div class="panel-body">
            <p class="foodname">Baked Clams</p><p class="fd">Six fresh clams, tossed gently 
         with melted butter, freshly crushed garlic, with a hint of lemon, and mixed 
           with our freshly baked homemade bread....$10.99</p>
            <p class="foodname">Anti Pasta</p><p class="fd">Description Description description 
   description.......$11.99</p>
            <p class="foodname">Mozarrella Sticks</p><p class="fd">Description Description 
   description description.......$11.99</p>
            <p class="foodname">Rice Balls</p><p class="fd">Description Description description
   description.......$11.99</p>
        </div>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" 
   href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      Chicken
            </a>
        </h4>
   </div>
   <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" 
   aria-labelledby="headingTwo">
       <div class="panel-body">
           <p class="foodname">Chicken Sorrentine</p><p class="fd">Six fresh clams, tossed 
   gblahahsfsjdfklsdjfkljsdfklsdjklfjsd crushed garlic, with a hint of lemon, and mixed 

        with our freshly baked homemade bread....$20.99</p>
           <p class="foodname">Chicken Parmigana</p><p class="fd">Description Description 
description description.......$22.99</p>
           <p class="foodname">Chicken Francese</p><p class="fd">Description Description 
description description.......$22.99</p>
           <p class="foodname">Chicken City Slickah</p><p class="fd">Description Description 
 description description.......$23.99</p></div>
       </div>
 </div>
<div class="panel panel-default">
     <div class="panel-heading" role="tab" id="headingThree">
         <h4 class="panel-title">
             <a class="collapsed" data-toggle="collapse" data-parent="#accordion" 
    href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      Desserts
             </a>
         </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" 
     aria-labelledby="headingThree">
        <div class="panel-body">
            <p class="foodname">Tirimasu</p><p class="fd">Like no other Tirimasu you have had 
    in your life. This will leave your evening complete...... $7.99 </p>
            <p class="foodname">Italian Cheesecake</p><p class="fd">Description Description 
    description description.......$7.99</p>
            <p class="foodname">Chocolate Mousse</p><p class="fd">Description Description    
    description description.......$7.99</p>
            <p class="foodname">Gelato</p><p class="fd">Fresh, handmade gelato, as authenic as 
    the streets of roma. $4.99</p>
        </div>
    </div>
</div>
</div>
</div>