css - 带有溢出的 JQuery UI Accordion 转换问题

Question

我正在使用 Bootstrap-Select在 jQuery UI Accordion 内部，为了使其正常工作，我需要按如下方式设置 Accordion 内容的样式:

CSS:

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

Bootstrap-select 按预期工作，但它会导致 header 之间的转换困惑。没有溢出 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/