rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

fix(scrollspy): Spying on nested navs fails to activate for .nav-link's inside nav-item's (#23967)

Browse Source 
* fix(scrollspy): Handle nested navs when nav-link inside nav-item

* [scrolspy] Find only child .nav-link's inside .nav-item

* [scrollspyt] Add tests for nested navs with nav-link inside nav-item

* fix troy-o's in test
This commit is contained in:
Troy Morehouse 2017-09-17 04:30:37 -03:00 committed by Johann-S
parent e296c13741
commit 6c70c70f63
2 changed files with 44 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/src/scrollspy.js
View File

@ -54,6 +54,7 @@ const ScrollSpy = (() => {
ACTIVE : '.active',
NAV_LIST_GROUP : '.nav, .list-group',
NAV_LINKS : '.nav-link',
NAV_ITEMS : '.nav-item',
LIST_ITEMS : '.list-group-item',
DROPDOWN : '.dropdown',
DROPDOWN_ITEMS : '.dropdown-item',
@ -264,6 +265,8 @@ const ScrollSpy = (() => {
// Set triggered links parents as active
// With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
$link.parents(Selector.NAV_LIST_GROUP).prev(`${Selector.NAV_LINKS}, ${Selector.LIST_ITEMS}`).addClass(ClassName.ACTIVE)
// Handle special case when .nav-link is inside .nav-item
$link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_ITEMS).children(Selector.NAV_LINKS).addClass(ClassName.ACTIVE)
}
$(this._scrollElement).trigger(Event.ACTIVATE, {

41
js/tests/unit/scrollspy.js
View File

@ -360,6 +360,47 @@ $(function () {
testActiveElements()
})
QUnit.test('should add the active class correctly when there are nested elements (nav nav-item markup)', function (assert) {
assert.expect(6)
var times = 0
var done = assert.async()
var navbarHtml = '<nav id="navigation" class="navbar">'
+ '<ul class="nav">'
+ '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a></li>'
+ '<ul class="nav">'
+ '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
+ '</ul>'
+ '</ul>'
+ '</nav>'
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">'
+ '<div id="div-1" style="padding: 0; margin: 0">'
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
+ '</div>'
+ '</div>'
$(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml)
.appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '#navigation' })
function testActiveElements() {
if (++times > 3) { return done() }
$content.one('scroll', function () {
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class')
testActiveElements()
})
$content.scrollTop($content.scrollTop() + 10)
}
testActiveElements()
})
QUnit.test('should add the active class correctly when there are nested elements (list-group markup)', function (assert) {
assert.expect(6)
var times = 0