jquery - 带有多个手风琴的jQueryUI？

Question

我在一些标签中有 3 个手风琴，我的内容没有正确显示下面的图片和代码，

<div id="tabs">
                      <ul>
                        <li><a href="#tabs-1">BREAKFAST</a></li>
                        <li><a href="#tabs-2">LUNCH</a></li>
                        <li><a href="#tabs-3">DINNER</a></li>
                      </ul>
                    <div id="tabs-1">
    <div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>

</div>

                    </div>

其他两个选项卡中的相同代码......

干杯，

Answer 1

使用手风琴heightStyle选项。您可以将其设置为"content"或"fill"取决于所需的行为，请记住，最初关闭的选项卡是不可见的，因此它们没有高度。为选项卡设置一个高度可能是个好主意，但这实际上取决于您的页面布局。选项卡小部件还有一个您可能想要摆弄的heightStyle选项。

例子：

$('#tabs').tabs();

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

这是一个jsfiddle