手风琴调整jquery 1.10.4中面板的高度

Question

我知道这是一个有据可查的问题，但是 - 我被困住了。

我正在使用最新的 jQuery (1.10.4) 并运行手风琴。面板区域的高度现在看起来设置为“自动”，因为它采用最大的内容并将其应用于其余面板。根据 API 文档，我更改了以下 JS 行（heightStyle 从“auto”到“content”）：

$.widget( "ui.accordion", {version: "1.10.4", options: {
    active: 0,
    animate: {},
    collapsible: true,
    event: "click",
    header: "> li > :first-child,> :not(li):even",
    heightStyle: "content",                         <!-- This line is changed -->
    icons: {activeHeader: "ui-icon-triangle-1-s",
        header: "ui-icon-triangle-1-e"},

这没有帮助。 我也试过这个（也失败了）：

var heightStyle = $( ".questions" ).accordion("heightStyle");
$( ".questions" ).accordion("heightStyle");

最后我尝试了这个，令人惊讶的是，它也没有用：

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

(.questions) - 是手风琴元素的名称。

有什么想法吗？谢谢！

更新 2 - html 代码的相关部分（选项卡中的手风琴）：

<div class="questions">
<div id="Q401">
<table id="QTable">
<tr>
  <td><div id="QNumber">4.1</div></td>
  <td><div id="QText">Is the vessel provided with adequate operator’s navigation instructions and procedures?</div>
</td>
</tr>
</table>
</div>
<div>
<table id="RTable">
<tr>
<td>
<div id="Guidance">
  <p>content</p>
<ul>
      <li></li>
      <li></li>
    </ul>   
<p></p>
 </div>
 </td>

<td>
<div id="Response" class="Response">
  <label><input type="radio" name="Radio401" value="Y" id="Radio_401Y" onchange='radioChange(this, "401")'>Yes</label>
            <label><input type="radio" name="Radio401" value="N" id="Radio_401N" onChange='radioChange(this, "401")'>No</label>
 </div>
 <div id="responseDetails">
    <div id="Observation">
     <label for="observation">Observation:</label>
        <textarea name="observation" id="Obs401" rows="6" disabled style="width: 530px;" placeholder="Enter text of observation here ..."></textarea>
    </div>
    <div id="DueDate">
       <label for="DueDate">Due date:<br></label>
       <input name="DueDate" class="DueDate" type="date" id="DueDate401"/>
    </div>
    <div id="actions">
       <label for="actions">Actions required to correct and/or prevent this observation:</label>
       <textarea name="actions" id="pa401" rows="6" style="width: 530px;"></textarea>
     </div>
  </div>
 </td>
</tr>
</table>
</div>
</div> //closing class

其他题同结构

Answer 1

好的，我已经搞砸了，这里是Fiddle Demo

我把你的代码弄乱了一点，希望你不要介意:)

基本上我删除了表格等，因此它更适合手风琴的结构。 基本上你需要的是问题块。每个块有 2 个子元素，一个 h3 元素（如果您愿意，可以是另一个）和一个 div 元素。

我给这些块一个类，并这样初始化它们：

$( ".questionBlock" ).accordion({collapsible: true, active: false });

这样他们就开始崩溃了。展开每个，您可以看到它们根据各自的内容都有自己的高度。

如果还不清楚，请告诉我。

编辑：好的，我已经调整得更好了。这是初始化：

$( "#questions" ).accordion({collapsible: true, active: false, autoHeight: false});

此外，不再需要代码块questionBlock。您只需要 questions 作为 id，然后使用 <h3> 和 div 组合。我更新了提琴手演示。

更新：将heightStyle: "content" 添加到您的初始化中，这样您将拥有：

$( ".questions").accordion({collapsible: true, active: false, autoHeight: false, heightStyle: "content"});

你的小提琴很好用。