javascript - jQuery Accordion 高度样式 : content or fill not working

Question

我需要的是 Accordion (设备属性)中只有一个 div 可以将高度更改为内容。我还注意到，如果我转到 firebug 并删除设备 div 的高度属性，它将获得合适的高度。

我的 Accordion 启蒙:

$('#accordion').accordion({heightStyle: 'auto'});

我试过:

$('#accordion').accordion({heightStyle: "fill"}); 
$( "#accordion" ).accordion( "refresh" );

和

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

我需要:

Html 例子(让你有想法)

<div id="application" style="position:absolute">
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
<h3 id="clickTexts" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" aria-controls="ui-accordion-accordion-panel-5" aria-selected="false" tabindex="-1">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
Texts
</h3>
<div id="ui-accordion-accordion-panel-5" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="overflow: auto; display: none; height: 246px;" aria-labelledby="clickTexts" role="tabpanel" aria-expanded="false" aria-hidden="true">
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite"></span>
<input id="texts_ac" class="ui-autocomplete-input" type="text" onclick="this.value='';" autocomplete="off">
</div>
<h3 id="clickDevp" class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top" role="tab" aria-controls="device" aria-selected="true" tabindex="0">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
Device properties
</h3>
<div id="device" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="width: 278px; display: block; height: 246px;" aria-labelledby="clickDevp" role="tabpanel" aria-expanded="true" aria-hidden="false">
ID:
<input id="devID" type="text" style="float:right">
<hr>
<p id="devType">Type: BLOK6-097</p>
<hr>
<p>
<hr>
<p>Positions</p>
<div id="posTable">
<table border="1px" style="width:100%">
<tbody>
<tr>
<td>1</td>
<td>NORMAAL</td>
<td>X: Y:</td>
</tr>
<tr>
<td>2</td>
<td>MAX. 110 IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>3</td>
<td>MAX. 90 IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>4</td>
<td>MAX. 70 IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>5</td>
<td>MAX. 50 IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>6</td>
<td>PIJL IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>7</td>
<td>PIJL LINKS IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>8</td>
<td>EINDE SNELHEID IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
<tr>
<td>9</td>
<td>KRUIS IN DISCORDANTIE</td>
<td>X: Y:</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Answer 1

显然 $('div#device').css("高度", "") 成功了