javascript - Bootstrap 词缀导航栏 scrollspy 问题

Question

我有一个 bootsply设置来演示问题。问题是导航链接没有正确获得事件状态。如果您向下滚动页面，“入门”li 元素应该变为粗体，但事实并非如此。只有“Font awesome”li 元素有效。此外，最后一个链接“Bootstrap”不会在您单击它时显示为粗体。

CSS:

header {
  height: 365px;
  background: url("http://i.imgur.com/wU2YhOJ.png");
  background-color: #262626;
  background-size: cover;
  background-position: center;
}

header h1{
  font-family: Montserrat, sans-serif !important;
  font-size: 5.5em;
  color: white;
  word-break: normal;
  padding-top: 115px;

}

body h1 {
  font-family: 'Lato', sans-serif;
  line-height: 72px;
}

body, footer { font-family: 'Open Sans', sans-serif !important; }

body p { line-height: 28px; }

footer { background-color: #262626; }

.affix {
  top: 0px;
}

/* sidebar */
.bs-docs-sidebar {
  padding-left: 20px;
  margin-top: 60px;
  margin-bottom: 20px;
}

/* all links */
.bs-docs-sidebar .nav>li>a {
  color: #999;
  border-left: 2px solid transparent;
  padding: 4px 20px;
  font-size: 13px;
  font-weight: 400;
}

/* nested links */
.bs-docs-sidebar .nav .nav>li>a {
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 30px;
  font-size: 12px;
}

/* active & hover links */
.bs-docs-sidebar .nav>.active>a, 
.bs-docs-sidebar .nav>li>a:hover, 
.bs-docs-sidebar .nav>li>a:focus {
  color: #262626;                 
  text-decoration: none;          
  background-color: transparent;  
  border-left-color: #262626; 
}
/* all active links */
.bs-docs-sidebar .nav>.active>a, 
.bs-docs-sidebar .nav>.active:hover>a,
.bs-docs-sidebar .nav>.active:focus>a {
  font-weight: 600;
}
/* nested active links */
.bs-docs-sidebar .nav .nav>.active>a, 
.bs-docs-sidebar .nav .nav>.active:hover>a,
.bs-docs-sidebar .nav .nav>.active:focus>a {
  font-weight: 400;
}

/* hide inactive nested list */
.bs-docs-sidebar .nav ul.nav {
  display: none;           
}
/* show active nested list */
.bs-docs-sidebar .nav>.active>ul.nav {
  display: block;           
}
/* special back to top styling */
.back-to-top:hover,
.back-to-top:focus{
  border-left-color: transparent !important;
}

@media all and (max-width: 1170px) {
  .bs-docs-sidebar {
      display: none;
    }   
  }

  @media all and (max-width: 970px) {
    #body-middle {
      float: none;
      margin: 0 auto;
    }   
  }

HTML:

<header id="header">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                 <h1 class="text-center"><span class="">Theme guide</span></h1>

            </div>
        </div>
    </div>
</header>
<div class="container" id="body-content">
    <div class="row">
        <div class="col-md-2" id="body-left"></div>
        <div class="col-xs-11 col-md-8" id="body-middle">
            <br class="">
            <section>
                <div id="getting-started" class="">
                        <h1 class="">Getting started</h1>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Etiam accumsan
                        lectus ornare libero iaculis cursus. Ut imperdiet sollicitudin massa in
                        posuere. In vel mi lacus. In hac habitasse platea dictumst. Morbi ultrices
                        turpis non molestie ornare.</p>
                </div>
            </section>
            <section>
                <div id="font-awesome" class="">
                        <h1 class="">Font awesome</h1>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar.</p>
                </div>
                <div id="font-awesome-sub1" class="">
                        <h3 class="">Sub section</h3>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
                        justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
                        erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
                        urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
                        tempor pulvinar.</p>
                </div>
                <div id="font-awesome-sub2" class="">
                        <h3 class="">Sub section</h3>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
                        justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
                        erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
                        urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
                        tempor pulvinar.</p>
                </div>
            </section>
            <section>
                <div id="bootstrap" class="">
                        <h1 class="">Bootstrap</h1>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
                        justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
                        erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
                        urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
                        tempor pulvinar.</p>
                </div>
                <div id="bootstrap-sub1" class="">
                        <h3 class="">Sub section</h3>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
                        justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
                        erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
                        urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
                        tempor pulvinar.</p>
                </div>
                <div id="bootstrap-sub2" class="">
                        <h3 class="">Sub section</h3>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
                        justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
                        erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
                        urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
                        tempor pulvinar.</p>
                </div>
                <div id="bootstrap-sub3" class="">
                        <h3 class="">Sub section</h3>

                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus,
                        nisi condimentum pretium ultricies, massa sem porttitor ligula, venenatis
                        luctus felis lorem eget sapien. Nulla nec lectus tristique nunc eleifend
                        interdum pellentesque non nunc. Donec justo justo, tempor eget mattis in,
                        fermentum vitae metus. Nulla quis metus sed erat vulputate fermentum. Nunc
                        pharetra leo non mollis iaculis. Etiam egestas urna sed fermentum ornare.
                        Nulla facilisi. Vestibulum sagittis magna ut tempor pulvinar. Donec justo
                        justo, tempor eget mattis in, fermentum vitae metus. Nulla quis metus sed
                        erat vulputate fermentum. Nunc pharetra leo non mollis iaculis. Etiam egestas
                        urna sed fermentum ornare. Nulla facilisi. Vestibulum sagittis magna ut
                        tempor pulvinar.</p>
                </div>
            </section>
        </div>
        <div class="col-md-2 hidden-md" id="body-right">
            <div data-spy="affix" data-offset-top="365" data-offset-bottom="200" class="">
                <nav class="bs-docs-sidebar">
                    <ul id="sidebar" class="nav nav-stacked fixed">
                        <li>    <a href="#getting-started" class="">Getting Started</a>

                            <ul class="nav nav-stacked">
                                <li><a href="#GroupASub1" class="">Sub-Group 1</a>
                                </li>
                                <li><a href="#GroupASub2" class="">Sub-Group 2</a>
                                </li>
                            </ul>
                        </li>
                        <li>    <a href="#font-awesome" class="" contenteditable="false">Font Awesome</a>

                            <ul class="nav nav-stacked">
                                <li><a href="#font-awesome-sub1" class="">Sub-Group 1</a>
                                </li>
                                <li><a href="#font-awesome-sub2" class="">Sub-Group 2</a>
                                </li>
                    </ul>
                    </li>
                    <li>    <a href="#bootstrap" class="" contenteditable="false">Bootstrap</a>

                        <ul class="nav nav-stacked">
                            <li><a href="#bootstrap-sub1" class="">Sub-Group 1</a>
                            </li>
                            <li><a href="#bootstrap-sub2" class="">Sub-Group 2</a>
                            </li>
                            <li><a href="#bootstrap-sub3" class="">Sub-Group 3</a>
                            </li>
                            </ul>
                    </li>
                    <li><span class="">&nbsp;</span>
                    </li>
                    <li>    <a class="back-to-top" href="#header">Back to top</a>

                    </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<footer>
    <p class="text-center">Prepared by xxx. 2014</p>
</footer>

JS:

$('body').scrollspy({
  target: '#sidebar',
  offset: 40
});

Answer 1

 <ul id="sidebar" class="nav nav-stacked fixed">
              <li>  <a href="#getting-started" class="">Getting Started</a>

                        <ul class="nav nav-stacked">
                            <li><a href="#GroupASub1" class="">Sub-Group 1</a>
                            </li>
                            <li><a href="#GroupASub2" class="">Sub-Group 2</a>
                            </li>
                        </ul>

未添加入门中的事件选择器，因为主 html 中没有子组部分。如果你添加它，它就有效。仅当您滚动到子时，才会在此处看到事件是否出现在侧边栏的主 li 上。 http://www.bootply.com/Hrs2sw3uGj#这也适用于 boostrap 链接。您必须滚动更多才能激活它!