Twitter Bootstrap:goToByScroll jQuery插件在初始化崩溃插件后不起作用?

时间:2013-01-04 00:19:31

标签: jquery twitter-bootstrap

编辑:我通过取出页面底部的一个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>

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

1 个答案:

答案 0 :(得分:0)

  1. 为了使手风琴起作用,它需要jquery库。 Here
  2. 为什么你有两个引导脚本: <script src="js/bootstrap.min.js"></script><script type="text/javascript" src="/static/js/bootstrap.js"></script>?这两者有什么区别?如果它们相同,则可以使用bootstrap.min.js,因为这只是bootstap.js的缩小版本。
  3. 如果没有.animate()库,您怎么能够使用.attr().ready()jquery等?