带有溢出的 JQuery UI Accordion 转换问题答案

【问题标题】：JQuery UI Accordion transition issues with overflow带有溢出的 JQuery UI Accordion 转换问题
【发布时间】：2016-03-06 19:45:01
【问题描述】：

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

CSS：

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

Bootstrap-select 按预期工作，但它会导致标题之间的转换混乱。没有溢出 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

【问题讨论】：

BS-select 中断是什么意思。你确定你有 data-live-search=true 吗？它似乎对我有用jsfiddle.net/zgoxjob6/1
@miro 添加了一张 BS-Select 在禁用溢出时的样子。

标签： css jquery-ui accordion jquery-ui-accordion bootstrap-select

【解决方案1】：

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

https://jsfiddle.net/hbmjvr7L/

【讨论】：