滚动选择错误的元素

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弄乱了位置。 删除巢解决了我的问题：

 $('.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 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>