Question

所以我已经设法弄清楚如何使用scrolllspy，但是我没有意识到我的目录对于导航来说太长了。我想知道如何添加手风琴类型的功能，以便我的导航栏目录在滚动后传递关联的锚点时会崩溃。我本质上是在寻找与bootstrap网站相同的功能，因为它附带了侧边栏。我看过这个：Using bootstrap scrollspy for a div with collapse, to an affixed sidebar 但我不确定这是否与我正在寻找的东西相同。我也考虑过使用Greg Franko编写的TOCIFY插件，但我不确定如何实现它。我一直在阅读TOCIFY文档，但我不确定它是什么，我必须改变。

目前我的scrollspy功能正在使用此设置：

<body data-spy="scroll" data-offset="0" data-target="#navbar" style="">
<div class="container-fluid">
<div class="row-fluid">
    <div class="span3" id="navbar">
        <ul class="nav nav-tabs nav-stacked affix">
            <li class="active h2-link"><a href="#executive-summary">Executive Summary</a></li>
            <ul>
                <li class="h3-link"><a href="#defining-mental-health">Defining Mental Health</a></li>
                <li class="h3-link"><a href="#review-process">Review Process</a></li>
                <li class="h3-link"><a href="#findings-and-recommendations">Findings and Recommendations</a></li>
                <li class="h3-link"><a href="#acknowledgement">Acknowledgement</a></li>
            </ul>
            <li class="h2-link"><a href="#preamble">Preamble</a></li>
            <li class="h2-link"><a href="#section-one">Section One: Our Context</a></li>
            <ul>
                <li class="h3-link"><a href="#MRU-world-of-difference">Mount Royal University: A World of Difference</a></li>
                    <ul>
                        <li class="h4-link"><a href="#MRU-vision">Mount Royal's Vision</a></li>
                        <li class="h4-link"><a href="#MRU-mission">Mount Royal's Mission</a></li>
                        <li class="h4-link"><a href="#MRU-guiding-principles">Mount Royal's Guiding Principles</a></li>
                    </ul>
                <li class="h3-link"><a href="#health-and-safety">Health and Safety at Mount Royal University</a></li>
                <li class="h3-link"><a href="#student-services-plan">Student Services Plan</a></li>
                <li class="h3-link"><a href="#rationale-for-student-mental-health">Rationale for a Student Mental Health Strategy</a></li>
            </ul>
        </ul>
    </div>
    <div class="span9">

         <h2 id="executive-summary">Executive Summary</h2>
  </a>

  <h3 id="two">Introduction &amp; Background</h3>

  <p class="ParagraphText">Mount Royal University (MRU) has a long-standing history
  of student-centered leadership and learning.&nbsp;We are known to be an institution
  that cares about the success and the health of our students, and we have strong
  services that support mental health promotion and respond well to mental health
  issues and concerns. In addition to excellent service providers, MRU has many
  positive practices and policies in place to support students.&nbsp; Recent trends
  suggest that the prevalence of mental health issues is on the rise among young
  adults. More students are entering into university with pre-existing mental health
  conditions, more are seeking help, and often issues are complex and
  multifaceted.&nbsp; Given that rates of mental illness are on the rise, and given
  that our student population has reported stress levels higher than other students
  at post-secondary institutions in North American, a review of our student mental
  health practices and procedures was warranted.</p>

您可以在此处看到它：https://googledrive.com/host/0BwvPQbnPrz_LTlBjelIwemxaZzg/index.html

我很感激任何帮助或建议。如果我的研究不够广泛并且已经得到回答，我会道歉。

使用jQueryUI Accordion功能的Scrollspy

0 个答案: