Permalink
Browse files

Collapsible: Use more conservative selector to avoid recursion

(cherry picked from commit b1a3ca6)

Fixes gh-7413
  • Loading branch information...
1 parent 901c8ff commit ebb6b41518215b7db2cd2b8156c141094a64ced3 @gabrielschulhof gabrielschulhof committed Jun 6, 2014
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.