Scrollspy选择错误的元素

Question

正如您在此示例中所看到的，Bootstrap Scrollspy会跳过导航，但实际上并没有按预期工作。错误的项目是获得.active类。

$('.spycontent').scrollspy({ target: 'nav' })

html, body {
  height:100%;
}

body > .container, body > .container > .row, .col-xs-6 {
  height:100%;
}
  
.col-xs-6 {
  overflow-y:auto;
}

.item {
  height:500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    
    <div class="container">
        <div class="row">
            <nav class="col-xs-6">
                <ul class="nav nav-pills nav-stacked">
                    <li>
                        <a href="#group1">group1</a>
                        <ul class="nav nav-pills nav-stacked">
                            <li>
                                <a href="#question1">question1</a>
                            </li>
                            <li>
                                <a href="#question2">question2</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#group2">group2</a>
                        <ul class="nav nav-pills nav-stacked">
                            <li>
                                <a href="#question3">question3</a>
                            </li>
                            <li>
                                <a href="#question5">question5</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="col-xs-6 spycontent">
                <div class="col-xs-12" id="group1">
                    group1
                    <div class="row">
                        <div class="col-xs-12 item" id="question1">
                            question1
                        </div>
                        <div class="col-xs-12 item" id="question2">
                            question2
                        </div>
                    </div>
                </div>
                <div class="col-xs-12" id="group2">
                    group2
                    <div class="row">
                        <div class="col-xs-12 item" id="question3">
                            question3
                        </div>
                        <div class="col-xs-12 item" id="question5">
                            question5
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

菜单和内容看起来很完美，为什么突出显示错误的项目？

Answer 1

我发现了发生的事情：

当我告诉它有一个嵌套在另一列中的列时，不知何故浏览器不同意我的看法。 TWBS CSS以某种方式混淆了这个位置。删除巢解决了我的问题：

＆＃13;

＆＃13;

$('.spycontent').scrollspy({ target: 'nav' })

＆＃13;

html, body {
  height:100%;
}

body > .container, body > .container > .row, .col-xs-6 {
  height:100%;
}
  
.col-xs-6 {
  overflow-y:auto;
}

.item {
  height:500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    
    <div class="container">
        <div class="row">
            <nav class="col-xs-6">
                <ul class="nav nav-pills nav-stacked">
                    <li>
                        <a href="#group1">group1</a>
                        <ul class="nav nav-pills nav-stacked">
                            <li>
                                <a href="#question1">question1</a>
                            </li>
                            <li>
                                <a href="#question2">question2</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#group2">group2</a>
                        <ul class="nav nav-pills nav-stacked">
                            <li>
                                <a href="#question3">question3</a>
                            </li>
                            <li>
                                <a href="#question5">question5</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="col-xs-6 spycontent">
                <div id="group1">
                    group1
                    <div class="row">
                        <div class="col-xs-12 item" id="question1">
                            question1
                        </div>
                        <div class="col-xs-12 item" id="question2">
                            question2
                        </div>
                    </div>
                </div>
                <div id="group2">
                    group2
                    <div class="row">
                        <div class="col-xs-12 item" id="question3">
                            question3
                        </div>
                        <div class="col-xs-12 item" id="question5">
                            question5
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;