Permalink
Browse files

Collapsible: Use more conservative selector to avoid recursion

(cherry picked from commit b1a3ca6)

Fixes gh-7413
  • Loading branch information...
gabrielschulhof committed Jun 6, 2014
1 parent 901c8ff commit ebb6b41518215b7db2cd2b8156c141094a64ced3
Showing with 78 additions and 2 deletions.
  1. +2 −2 js/widgets/collapsible.js
  2. +20 −0 tests/unit/collapsible/collapsible_core.js
  3. +56 −0 tests/unit/collapsible/index.html
@@ -58,9 +58,9 @@ $.widget( "mobile.collapsible", {
this._renderedOptions = this._getOptions( this.options );
if ( this.options.enhanced ) {
ui.heading = $( ".ui-collapsible-heading", this.element[ 0 ] );
ui.heading = this.element.children( ".ui-collapsible-heading" );
ui.content = ui.heading.next();
ui.anchor = $( "a", ui.heading[ 0 ] ).first();
ui.anchor = ui.heading.children();
ui.status = ui.anchor.children( ".ui-collapsible-heading-status" );
} else {
this._enhance( elem, ui );
@@ -0,0 +1,20 @@
test( "Pre-rendered nested collapsibles are enhanced correctly", function() {
var outerWidget = $( "#outer" ).collapsible().data( "mobile-collapsible" ),
innerWidget = $( "#inner" ).collapsible().data( "mobile-collapsible" );
deepEqual( outerWidget._ui.heading.length, 1, "Outer heading consists of one element" );
deepEqual( outerWidget._ui.heading[ 0 ], $( "#outer-heading" )[ 0 ],
"Outer heading consists of the right element" );
deepEqual( outerWidget._ui.content.length, 1, "Outer content consists of one element" );
deepEqual( outerWidget._ui.content[ 0 ], $( "#outer-content" )[ 0 ],
"Outer content consists of the right element" );
deepEqual( outerWidget._ui.anchor.length, 1, "Outer anchor consists of one element" );
deepEqual( outerWidget._ui.anchor[ 0 ], $( "#outer-anchor" )[ 0 ],
"Outer anchor consists of the right element" );
deepEqual( outerWidget._ui.status.length, 1, "Outer anchor consists of one element" );
deepEqual( outerWidget._ui.status[ 0 ], $( "#outer-status" )[ 0 ],
"Outer status consists of the right element" );
});
@@ -0,0 +1,56 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Mobile Controlgroup Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../js/requirejs.config.js"></script>
<script src="../../../js/jquery.tag.inserter.js"></script>
<script src="../../../tests/jquery.testHelper.js"></script>
<script src="../../../external/qunit/qunit.js"></script>
<script>
$.testHelper.asyncLoad([
[ "widgets/collapsible" ],
[ "../../jquery.setNameSpace.immediately.js" ],
[ "collapsible_core.js" ]
]);
</script>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
<link rel="stylesheet" href="../../jqm-tests.css"/>
<script src="../../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="outer" data-nstest-role="collapsible" data-nstest-enhanced="true" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-collapsed ui-collapsible-themed-content">
<h4 id="outer-heading" class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a id="outer-anchor" href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">
Outer
<div id="outer-status" class="ui-collapsible-heading-status"> click to expand contents</div>
</a>
</h4>
<div id="outer-content" class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
<div id="inner" data-nstest-role="collapsible" data-nstest-enhanced="true" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-collapsed ui-collapsible-themed-content">
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">
Inner
<div class="ui-collapsible-heading-status"> click to expand contents</div>
</a>
</h4>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
</div>
</div>
</div>
</body>
</html>

0 comments on commit ebb6b41

Please sign in to comment.