mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-12 16:44:17 +02:00
Detach accordion from card without requiring 'data-children'
This commit is contained in:
committed by
Johann-S
parent
ba312c20a5
commit
ab39defe74
@@ -56,9 +56,8 @@ const Collapse = (($) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Selector = {
|
const Selector = {
|
||||||
ACTIVES : '.card > .show, .card > .collapsing',
|
ACTIVES : '.show, .collapsing',
|
||||||
DATA_TOGGLE : '[data-toggle="collapse"]',
|
DATA_TOGGLE : '[data-toggle="collapse"]'
|
||||||
DATA_CHILDREN : 'data-children'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -78,20 +77,13 @@ const Collapse = (($) => {
|
|||||||
`[data-toggle="collapse"][href="#${element.id}"],` +
|
`[data-toggle="collapse"][href="#${element.id}"],` +
|
||||||
`[data-toggle="collapse"][data-target="#${element.id}"]`
|
`[data-toggle="collapse"][data-target="#${element.id}"]`
|
||||||
))
|
))
|
||||||
|
|
||||||
this._parent = this._config.parent ? this._getParent() : null
|
this._parent = this._config.parent ? this._getParent() : null
|
||||||
|
|
||||||
if (!this._config.parent) {
|
if (!this._config.parent) {
|
||||||
this._addAriaAndCollapsedClass(this._element, this._triggerArray)
|
this._addAriaAndCollapsedClass(this._element, this._triggerArray)
|
||||||
}
|
}
|
||||||
|
|
||||||
this._selectorActives = Selector.ACTIVES
|
|
||||||
if (this._parent) {
|
|
||||||
const childrenSelector = this._parent.hasAttribute(Selector.DATA_CHILDREN) ? this._parent.getAttribute(Selector.DATA_CHILDREN) : null
|
|
||||||
if (childrenSelector !== null) {
|
|
||||||
this._selectorActives = `${childrenSelector} > .show, ${childrenSelector} > .collapsing`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._config.toggle) {
|
if (this._config.toggle) {
|
||||||
this.toggle()
|
this.toggle()
|
||||||
}
|
}
|
||||||
@@ -129,7 +121,7 @@ const Collapse = (($) => {
|
|||||||
let activesData
|
let activesData
|
||||||
|
|
||||||
if (this._parent) {
|
if (this._parent) {
|
||||||
actives = $.makeArray($(this._parent).find(this._selectorActives))
|
actives = $.makeArray($(this._parent).children().children(Selector.ACTIVES))
|
||||||
if (!actives.length) {
|
if (!actives.length) {
|
||||||
actives = null
|
actives = null
|
||||||
}
|
}
|
||||||
|
@@ -491,27 +491,85 @@ $(function () {
|
|||||||
})
|
})
|
||||||
|
|
||||||
QUnit.test('should allow accordion to use children other than card', function (assert) {
|
QUnit.test('should allow accordion to use children other than card', function (assert) {
|
||||||
assert.expect(2)
|
assert.expect(4)
|
||||||
var done = assert.async()
|
var done = assert.async()
|
||||||
var accordionHTML = '<div id="accordion" data-children=".item">'
|
var accordionHTML = '<div id="accordion">'
|
||||||
+ '<div class="item">'
|
+ '<div class="item">'
|
||||||
+ '<a id="linkTrigger" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
|
+ '<a id="linkTrigger" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
|
||||||
+ '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>'
|
+ '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>'
|
||||||
+ '</div>'
|
+ '</div>'
|
||||||
+ '<div class="item">'
|
+ '<div class="item">'
|
||||||
+ '<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
|
+ '<a id="linkTriggerTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
|
||||||
+ '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>'
|
+ '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>'
|
||||||
+ '</div>'
|
+ '</div>'
|
||||||
+ '</div>'
|
+ '</div>'
|
||||||
|
|
||||||
$(accordionHTML).appendTo('#qunit-fixture')
|
$(accordionHTML).appendTo('#qunit-fixture')
|
||||||
var $target = $('#linkTrigger')
|
var $trigger = $('#linkTrigger')
|
||||||
$('#collapseOne').on('shown.bs.collapse', function () {
|
var $triggerTwo = $('#linkTriggerTwo')
|
||||||
assert.ok($(this).hasClass('show'))
|
var $collapseOne = $('#collapseOne')
|
||||||
assert.ok(!$('#collapseTwo').hasClass('show'))
|
var $collapseTwo = $('#collapseTwo')
|
||||||
done()
|
$collapseOne.on('shown.bs.collapse', function () {
|
||||||
|
assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
|
||||||
|
assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
|
||||||
|
$collapseTwo.on('shown.bs.collapse', function () {
|
||||||
|
assert.ok(!$collapseOne.hasClass('show'), '#collapseOne is not shown')
|
||||||
|
assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown')
|
||||||
|
done()
|
||||||
|
})
|
||||||
|
$triggerTwo.trigger($.Event('click'))
|
||||||
})
|
})
|
||||||
$target.trigger($.Event('click'))
|
$trigger.trigger($.Event('click'))
|
||||||
|
})
|
||||||
|
|
||||||
|
QUnit.test('should collapse accordion children but not nested accordion children', function (assert) {
|
||||||
|
assert.expect(9)
|
||||||
|
var done = assert.async()
|
||||||
|
$('<div id="accordion">'
|
||||||
|
+ '<div class="item">'
|
||||||
|
+ '<a id="linkTrigger" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
|
||||||
|
+ '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree">'
|
||||||
|
+ '<div id="nestedAccordion">'
|
||||||
|
+ '<div class="item">'
|
||||||
|
+ '<a id="nestedLinkTrigger" data-parent="#nestedAccordion" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>'
|
||||||
|
+ '<div id="nestedCollapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree">'
|
||||||
|
+ '</div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '<div class="item">'
|
||||||
|
+ '<a id="linkTriggerTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
|
||||||
|
+ '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '</div>').appendTo('#qunit-fixture')
|
||||||
|
var $trigger = $('#linkTrigger')
|
||||||
|
var $triggerTwo = $('#linkTriggerTwo')
|
||||||
|
var $nestedTrigger = $('#nestedLinkTrigger')
|
||||||
|
var $collapseOne = $('#collapseOne')
|
||||||
|
var $collapseTwo = $('#collapseTwo')
|
||||||
|
var $nestedCollapseOne = $('#nestedCollapseOne')
|
||||||
|
|
||||||
|
|
||||||
|
$collapseOne.one('shown.bs.collapse', function () {
|
||||||
|
assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
|
||||||
|
assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
|
||||||
|
assert.ok(!$('#nestedCollapseOne').hasClass('show'), '#nestedCollapseOne is not shown')
|
||||||
|
$nestedCollapseOne.one('shown.bs.collapse', function () {
|
||||||
|
assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
|
||||||
|
assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
|
||||||
|
assert.ok($nestedCollapseOne.hasClass('show'), '#nestedCollapseOne is shown')
|
||||||
|
$collapseTwo.one('shown.bs.collapse', function () {
|
||||||
|
assert.ok(!$collapseOne.hasClass('show'), '#collapseOne is not shown')
|
||||||
|
assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown')
|
||||||
|
assert.ok($nestedCollapseOne.hasClass('show'), '#nestedCollapseOne is shown')
|
||||||
|
done()
|
||||||
|
})
|
||||||
|
$triggerTwo.trigger($.Event('click'))
|
||||||
|
})
|
||||||
|
$nestedTrigger.trigger($.Event('click'))
|
||||||
|
})
|
||||||
|
$trigger.trigger($.Event('click'))
|
||||||
})
|
})
|
||||||
|
|
||||||
QUnit.test('should not prevent event for input', function (assert) {
|
QUnit.test('should not prevent event for input', function (assert) {
|
||||||
|
Reference in New Issue
Block a user