html - 让 Bootstrap 3 按钮组正确触发 Accordion 的问题

Question

我正在尝试在 bootstrap 中创建一个包含两个按钮组列表的页面。主按钮将触发我稍后要写的事件，但目标是让按钮组右侧的按钮(看起来像下拉按钮)触发按钮下方的 Accordion 。

我或多或少地解决了以下问题:1)由于某种原因，按钮组左侧有圆 Angular ，右侧有尖 Angular 。没什么大不了的，但很烦人。

2)触发 Accordion 打开时有一些奇怪的视觉效果。有那么一瞬间，它似乎无限扩大，盒子的右侧出现了奇怪的线条。然后一切都恢复到它应该看起来的样子。

3) 当折叠打开的 Accordion 时，div 只是消失而不是平滑地向上滚动。

4) 第二个按钮下面有一条奇怪的线，我想这与 Accordion 面板有关，但我不确定。

如有任何帮助或提示，我们将不胜感激。谢谢!

HTML:

<div align="center">
  <div class="accordion" id="myAccordion">
    <div class="panel">
      <div class="btn-group btn-block btn-group-lg">
        <button type="button" class="btn btn-default btn-main-title">
          Button 1
        </button>
      <button type="button" class="btn btn-default btn-main-dropdown" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <div id="collapsible-1" class="collapse">
        <div style="background-color:#dff0d8;">Nulla vel imperdiet elit. Nullam et diam nulla. Duis nunc orci, gravida vel pellentesque ac, bibendum vitae enim. Aliquam ullamcorper rutrum est, nec luctus eros posuere in. Suspendisse molestie enim eget ante facilisis vehicula. Duis quis consectetur massa. Aliquam sit amet turpis eget metus rutrum pellentesque id eget eros. Aliquam et eros non justo porttitor scelerisque ut ut neque. Ut ultricies mauris sit amet enim iaculis, sed varius nisl varius. Nunc sed urna non enim lobortis sodales sed nec nisl. Duis commodo luctus massa eu interdum. Fusce laoreet ac massa eget sollicitudin. Duis in ligula commodo lectus dictum laoreet vel ac quam.</div>
      </div>
    </div>      

    <div class="btn-group btn-block btn-group-lg">
      <button type="button" class="btn btn-default btn-main-title">
        Button 2
      </button>
      <button type="button" class="btn btn-default btn-main-dropdown" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <div id="collapsible-2" class="collapse">
        <div style="background-color:#dff0d8;">Nulla vel imperdiet elit. Nullam et diam nulla. Duis nunc orci, gravida vel pellentesque ac, bibendum vitae enim. Aliquam ullamcorper rutrum est, nec luctus eros posuere in. Suspendisse molestie enim eget ante facilisis vehicula. Duis quis consectetur massa. Aliquam sit amet turpis eget metus rutrum pellentesque id eget eros. Aliquam et eros non justo porttitor scelerisque ut ut neque. Ut ultricies mauris sit amet enim iaculis, sed varius nisl varius. Nunc sed urna non enim lobortis sodales sed nec nisl. Duis commodo luctus massa eu interdum. Fusce laoreet ac massa eget sollicitudin. Duis in ligula commodo lectus dictum laoreet vel ac quam.</div>
      </div>
    </div>
  </div>
</div>

CSS:

.btn-main-title {
  width: 75%;
  text-align: left;
}

.btn-main-dropdown {
  width: 15%;
}

Bootstrap :http://bootply.com/104455

Answer 1

移动<div id="collapsible-1" class="collapse">在<div class="btn-group btn-block btn-group-lg">之外

这是 collapse在btn-group里面这似乎导致了你的问题......

http://bootply.com/104468

<div class="accordion" id="myAccordion">
    <div class="panel">
        <div class="btn-group btn-block btn-group-lg">
           <button>...</button>
           <button>...</button>
        </div>      

        <div id="collapsible-1" class="collapse">
           <div>Content...</div>
        </div>
        ...
    </div>
</div>

然后我采纳了你的想法并以稍微不同的方式重新创建了它，只是为了好玩。

My version