scrollspy: fix wrong activation of all nested links

[mr-july]

if the scrollspy applied to hierarchical navigation, then too many nav-links are activated.
Example markup:

      <ul id="toc" class="nav nav-pills nav-stacked">
        <li>
          <a href="#v1" class="nav-link">Volume 1</a>
          <ul class="nav">
            <li>
              <a href="#ch-1-1" class="nav-link">Chapter 1.1</a>
            </li>
            <li>
              <a href="#ch-1-2" class="nav-link">Chapter 1.2</a>
            </li>
            <li>
              <a href="#ch-1-3" class="nav-link">Chapter 1.3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#v2" class="nav-link">Volume 2</a>
          <ul class="nav">
            <li>
              <a href="#ch-2-1" class="nav-link">Chapter 2.1</a>
            </li>
            <li>
              <a href="#ch-2-2" class="nav-link">Chapter 2.2</a>
            </li>
          </ul>
        </li>
      </ul>

on activation of "Chapter 1.2" all siblings ("Chapter 1.1" and "Chapter 1.3") are also activated, because the selector

$('.nav-link[href="#ch-1-2"]').parents('li').find('.nav-links')

matches all ".nav-link"s under "#v1", so the correct selector should be

$('.nav-link[href="#ch-1-2"]').parents('li').find('> .nav-links')
                                                   ^
                                      only direct children of li

The illustration of this problem can be found on JSFiddle, and the solution (just patched version of bootstrap.min.js) is here.

[houndci-bot]

Unexpected string concatenation prefer-template

[mr-july]

This is the isolated version of #20209. I hope, that with problem demonstration and solution it will be easy to accept this request. ;-)

[mr-july]

Here is the revised version of problem example and solution.

[el222wg]

Sorry for asking but is this fixed yet? It would be nice if nested lists/navs worked with scrollspy, I think it worked with bootstrap 3.

[mr-july]

emmalovgren, if this pull request will be accepted (I dont't know why it's not accepted yet), then nested lists/navs will be functional with scrollspy. If you don't like to wait, you can create custom build for bootstrap4 and include proposed patch.

[mdo]

I would love to get this fixed.

@bardiharborow I saw you comment on a few related issues weeks back. Any feedback on this? I've closed some of those other issues since they all involve requiring the .nav-item parent and I don't want to enforce that restriction. This was the only relevant PR that didn't do that.

[bardiharborow]

We're missing test coverage, but this looks all good from my end.

[bardiharborow]

@mdo @Johann-S are we good to go on this?

[Johann-S]

It seems we try to avoid child selector see :
#18400 (comment)

So of it's possible to avoid the child selector in this PR I think it would be better

[mdo]

@Johann-S For our CSS, yes, we're actively avoiding those except where they are purposefully limiting CSS inheritance. For this, I'm unsure what else we'd do here, so I'm inclined to merge. Should you or anyone else have something else in mind, I'm always open to it :).