Twitter Bootstrap：goToByScroll jQuery 插件在初始化折叠插件后不起作用？答案

【问题标题】：Twitter Bootstrap: goToByScroll jQuery plugin does not work after initializing collapse plugin?Twitter Bootstrap：goToByScroll jQuery 插件在初始化折叠插件后不起作用？
【发布时间】：2013-01-04 00:19:30
【问题描述】：

编辑：我通过取出页面底部的一个 jQuery 链接来使滚动工作

但是，现在手风琴折叠不起作用并展开所有链接。

我拿出了这个：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

我的 jQuery 插件出现问题，它会慢慢滚动到锚链接。它以前可以工作，直到我修复了手风琴崩溃。我到处寻找，我是 jQuery 的初学者，想知道我是否链接了正确的文件？

我知道我的 goToByScroll 插件的 HTML 代码很好，我认为它只是我的 jQuery 链接或 jQuery 代码。我已经为 jQuery 滚动效果引用了 http://www.spydertrap.com/blog/2012/08/user-experience-jquery-smooth-page-anchor-transitions/。

代码如下。

在我的文件的开头我有：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--Le Styles-->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

我想要任何有关与 jQuery 链接的帮助，因为我基本上是在尝试自学。这是手风琴折叠代码：

<div class="accordion" id="accordion1">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-parent="#accordion1" data-toggle="collapse" href="#panel1">

                    <h4>Piece Title</h4>

                </a><!--end link heading-->
            </div><!--end accordian heading-->

            <div class="accordion-body collapse in" id="panel1">
                <div class="accordion-inner">

                    <p>Here's some text.Here's some text.Here's some text.Here's some text.                     
                </div><!--end inner accordion-->
            </div><!--end accordion collapse-->
        </div><!--end accordion group-->
</div><!--end accordion complete-->

这是包含脚本的 HTML 页面的底部：

<script src="js/bootstrap.min.js"></script>

这个被取出来了，goToByScroll jQuery 能用了，但是折叠功能不行：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="/static/js/bootstrap.js"></script>

<!--calls and pauses carousel from sliding-->
<script type="text/javascript">
    $(document).ready(function(){
        $('.carousel').carousel();
        $('.carousel').carousel('pause');
    });
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $(".collapse").collapse()
    });
</script>

<!--eases transitions between anchors-->
<script type="text/javascript">
    function goToByScroll(id){
        $('html,body').animate({scrollTop: $(id).offset().top},'slow');
    }

    $(document).ready(function(){
        $('.nav a').click(function(){
        goToByScroll($(this).attr('href'));
        return false;
        });
    });
</script>

谢谢！如果有更多需要的文档，请告诉我。

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

为了让手风琴工作，它需要jquery 库。 Here
为什么有两个引导脚本： <script src="js/bootstrap.min.js"></script> 和 <script type="text/javascript" src="/static/js/bootstrap.js"></script>?两者有什么区别？如果它们相同，则可以使用 bootstrap.min.js，因为这只是 bootstap.js 的缩小版。
在没有jquery 库的情况下，您如何能够使用.animate()、.attr()、.ready() 等？

【讨论】：