JQuery UI 手风琴过渡问题溢出

Question

我在 jQuery UI 手风琴中使用 Bootstrap-Select，为了使其正常工作，我需要按如下方式设置手风琴内容的样式：

CSS:

.ui-accordion-content {
  overflow: visible !important;
}

Bootstrap-select 按预期工作，但它导致 headers 之间的转换混乱。没有溢出 css，转换按预期工作，但 Bootstrap-Select 中断。

HTML:

<div id="accordion">
  <h3>Header Two (Bootstrap-Select)</h3>
  <div>
    <select class="selectpicker form-control" data-live-search="true">
      <option>Select 1, Option 1</option>
      <option>Select 1, Option 2</option>
      <option>Select 1, Option 3</option>
      <option>Select 1, Option 4</option>
      <option>Select 1, Option 5</option>
    </select>
  </div>
</div>

JS:

$("#accordion").accordion({
  heightStyle: "content"
});

JSFiddle Demo

Answer 1

您可以将 data-container="body" 添加到 select 标记并删除 css 溢出。我认为这就是您正在寻找的结果：

https://jsfiddle.net/hbmjvr7L/

JQuery UI 手风琴过渡问题溢出

JQuery UI Accordion transition issues with overflow

css

jquery-ui

accordion

jquery-ui-accordion

bootstrap-select