diff options
author | Troy Morehouse <troymore@nbnet.nb.ca> | 2017-09-17 10:30:37 +0300 |
---|---|---|
committer | Johann-S <johann.servoire@gmail.com> | 2017-09-17 10:30:37 +0300 |
commit | 6c70c70f637267ca109f44ff63f564892ece42bf (patch) | |
tree | 796ce351f08f25ce111022bbab65136a820d7770 | |
parent | e296c1374104ef949ca8f6307f13b09dd4c4b09c (diff) |
fix(scrollspy): Spying on nested navs fails to activate for .nav-link's inside nav-item's (#23967)
* 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
-rw-r--r-- | js/src/scrollspy.js | 3 | ||||
-rw-r--r-- | js/tests/unit/scrollspy.js | 41 |
2 files changed, 44 insertions, 0 deletions
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 70067c0b35..e8f0d3101b 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -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, { diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js index 96cf54eef0..7bdeb4a8d7 100644 --- a/js/tests/unit/scrollspy.js +++ b/js/tests/unit/scrollspy.js @@ -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 |