Accordion: Correct height calculated when closed

Fixes #11938
Closes gh-1536
Closes gh-1616

(cherry picked from commit c87653bc24)
This commit is contained in:
Alyosha Pushak 2015-04-12 19:17:16 -07:00 committed by Scott González
parent f7a529ff0e
commit 00e5e146b2
3 changed files with 43 additions and 3 deletions

View File

@ -29,7 +29,7 @@
<script src="../swarminject.js"></script> <script src="../swarminject.js"></script>
<style> <style>
#list, #list1 *, #navigation, #navigation * { #list, #list1 *, #navigation, #navigation *, #collapsible, #collapsible * {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 12px; font-size: 12px;
@ -39,6 +39,10 @@
#list1 > div { #list1 > div {
overflow: visible; overflow: visible;
} }
#collapsibleWrapper {
width: 300px;
float: left;
}
</style> </style>
</head> </head>
<body> <body>
@ -134,6 +138,19 @@
</dd> </dd>
</dl> </dl>
<div id="collapsibleWrapper">
<div id="collapsible">
<h3>Header</h3>
<div>
<p>
The calculated height of this accordion should be the same
regardless of whether the accordion was collapsed or not
when the height was calculated.
</p>
</div>
</div>
</div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -44,6 +44,22 @@ test( "{ active: false }", function() {
strictEqual( element.accordion( "option", "active" ), 0 ); strictEqual( element.accordion( "option", "active" ), 0 );
}); });
// http://bugs.jqueryui.com/ticket/11938
test( "{ active: false, collapsible: true }", function() {
expect( 1 );
var element = $( "#collapsible" ).accordion(),
height = element.outerHeight();
element
.accordion( "destroy" )
.accordion( {
active: false,
collapsible: true
} )
.accordion( "option", "active", 0 );
equal( element.outerHeight(), height );
} );
test( "{ active: Number }", function() { test( "{ active: Number }", function() {
expect( 8 ); expect( 8 );
var element = $( "#list1" ).accordion({ var element = $( "#list1" ).accordion({

View File

@ -360,9 +360,16 @@ return $.widget( "ui.accordion", {
} else if ( heightStyle === "auto" ) { } else if ( heightStyle === "auto" ) {
maxHeight = 0; maxHeight = 0;
this.headers.next() this.headers.next()
.each(function() { .each( function() {
var isVisible = $( this ).is( ":visible" );
if ( !isVisible ) {
$( this ).show();
}
maxHeight = Math.max( maxHeight, $( this ).css( "height", "" ).height() ); maxHeight = Math.max( maxHeight, $( this ).css( "height", "" ).height() );
}) if ( !isVisible ) {
$( this ).hide();
}
} )
.height( maxHeight ); .height( maxHeight );
} }
}, },