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） - 是accordion元素的名称。

有什么想法吗？谢谢！

更新2 - html代码的相关部分（标签内的Accordion）：

<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>＆amp; div组合。我更新了小提琴演示。

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

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

你的小提琴很好。

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

1 个答案: