Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit ebb6b41

Browse files
author
Gabriel Schulhof
committed
Collapsible: Use more conservative selector to avoid recursion
(cherry picked from commit b1a3ca6) Fixes gh-7413
1 parent 901c8ff commit ebb6b41

File tree

3 files changed

+78
-2
lines changed

3 files changed

+78
-2
lines changed

‎js/widgets/collapsible.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,9 @@ $.widget( "mobile.collapsible", {
5858
this._renderedOptions = this._getOptions( this.options );
5959

6060
if ( this.options.enhanced ) {
61-
ui.heading = $( ".ui-collapsible-heading", this.element[ 0 ] );
61+
ui.heading = this.element.children( ".ui-collapsible-heading" );
6262
ui.content = ui.heading.next();
63-
ui.anchor = $( "a", ui.heading[ 0 ] ).first();
63+
ui.anchor = ui.heading.children();
6464
ui.status = ui.anchor.children( ".ui-collapsible-heading-status" );
6565
} else {
6666
this._enhance( elem, ui );

‎tests/unit/collapsible/collapsible_core.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
test( "Pre-rendered nested collapsibles are enhanced correctly", function() {
2+
var outerWidget = $( "#outer" ).collapsible().data( "mobile-collapsible" ),
3+
innerWidget = $( "#inner" ).collapsible().data( "mobile-collapsible" );
4+
5+
deepEqual( outerWidget._ui.heading.length, 1, "Outer heading consists of one element" );
6+
deepEqual( outerWidget._ui.heading[ 0 ], $( "#outer-heading" )[ 0 ],
7+
"Outer heading consists of the right element" );
8+
9+
deepEqual( outerWidget._ui.content.length, 1, "Outer content consists of one element" );
10+
deepEqual( outerWidget._ui.content[ 0 ], $( "#outer-content" )[ 0 ],
11+
"Outer content consists of the right element" );
12+
13+
deepEqual( outerWidget._ui.anchor.length, 1, "Outer anchor consists of one element" );
14+
deepEqual( outerWidget._ui.anchor[ 0 ], $( "#outer-anchor" )[ 0 ],
15+
"Outer anchor consists of the right element" );
16+
17+
deepEqual( outerWidget._ui.status.length, 1, "Outer anchor consists of one element" );
18+
deepEqual( outerWidget._ui.status[ 0 ], $( "#outer-status" )[ 0 ],
19+
"Outer status consists of the right element" );
20+
});

‎tests/unit/collapsible/index.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8" />
6+
<title>jQuery Mobile Controlgroup Test Suite</title>
7+
8+
<script src="../../../external/requirejs/require.js"></script>
9+
<script src="../../../js/requirejs.config.js"></script>
10+
<script src="../../../js/jquery.tag.inserter.js"></script>
11+
<script src="../../../tests/jquery.testHelper.js"></script>
12+
<script src="../../../external/qunit/qunit.js"></script>
13+
<script>
14+
$.testHelper.asyncLoad([
15+
[ "widgets/collapsible" ],
16+
[ "../../jquery.setNameSpace.immediately.js" ],
17+
[ "collapsible_core.js" ]
18+
]);
19+
</script>
20+
21+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
22+
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
23+
<link rel="stylesheet" href="../../jqm-tests.css"/>
24+
25+
<script src="../../swarminject.js"></script>
26+
</head>
27+
<body>
28+
29+
<div id="qunit"></div>
30+
31+
<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">
32+
<h4 id="outer-heading" class="ui-collapsible-heading ui-collapsible-heading-collapsed">
33+
<a id="outer-anchor" href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">
34+
Outer
35+
<div id="outer-status" class="ui-collapsible-heading-status"> click to expand contents</div>
36+
</a>
37+
</h4>
38+
<div id="outer-content" class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
39+
40+
<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">
41+
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
42+
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">
43+
Inner
44+
<div class="ui-collapsible-heading-status"> click to expand contents</div>
45+
</a>
46+
</h4>
47+
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
48+
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
49+
</div>
50+
</div>
51+
52+
</div>
53+
</div>
54+
55+
</body>
56+
</html>

0 commit comments

Comments
 (0)