admin管理员组

文章数量:1410712

I've spent a few hours trying to get this bootstrap collapse plugin to work. I'm sorry if this question has been asked a bunch before but I've scoured this place for a suitable answer. Here is my html:

<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>:(</title>
   <!-- Bootstrap -->
   <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
 </head>

 <body>
   <h1>Collapse!</h1>

  <a class="btn btn-danger" data-toggle="collapse" data-target="#demo">
     simple collapsible
  </a>

  <div id="demo" class="collapse in">
        <p>Hopefully this content will be collapsible!</p>
        <p>And this too!</p>
  </div>


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

<script src="//ajax.googleapis/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

  </body>
</html>

This is also my first use of stackoverflow to ask a question, so excuse the fact that I don't know how to properly format my question. I just added in that little snippet of jquery in the hopes that it would somehow initialize the js elements on the page. Please help!

I've spent a few hours trying to get this bootstrap collapse plugin to work. I'm sorry if this question has been asked a bunch before but I've scoured this place for a suitable answer. Here is my html:

<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>:(</title>
   <!-- Bootstrap -->
   <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
 </head>

 <body>
   <h1>Collapse!</h1>

  <a class="btn btn-danger" data-toggle="collapse" data-target="#demo">
     simple collapsible
  </a>

  <div id="demo" class="collapse in">
        <p>Hopefully this content will be collapsible!</p>
        <p>And this too!</p>
  </div>


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

<script src="//ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

  </body>
</html>

This is also my first use of stackoverflow to ask a question, so excuse the fact that I don't know how to properly format my question. I just added in that little snippet of jquery in the hopes that it would somehow initialize the js elements on the page. Please help!

  • javascript
  • css
  • twitter
  • twitter-bootstrap
Share edited Oct 29, 2012 at 10:21 Florent 12.4k10 gold badges50 silver badges58 bronze badges asked Oct 28, 2012 at 16:40 Will PiersWill Piers 4212 gold badges8 silver badges13 bronze badges 6
  • 1 Place your java script code after including the jquery and bootstrap plugin. – Mohamed Navas Commented Oct 28, 2012 at 16:43
  • A good Html structure follow the order like >>> 1. css file, 2. css inline code, 3. javaScript file, 4. javaScript inline code. – Mohamed Navas Commented Oct 28, 2012 at 16:45
  • Changing the order of the scripts doesn't appear to help – Will Piers Commented Oct 28, 2012 at 16:48
  • @ Will Piers -> See, if you are using a javascript library and playing with it, you should call before your custom code.I'm sure it will work if there is no error in code. – Mohamed Navas Commented Oct 28, 2012 at 16:53
  • also you forgot to put semicolon after $(".collapse").collapse() – Mohamed Navas Commented Oct 28, 2012 at 17:03
 |  Show 1 more ment

2 Answers 2

Reset to default 1

Here is the working version of your code http://jsbin./aximay/1/edit

I see that this question is a bit old, but just an additional note.

It seems there is no need to use the Bootstrap data attributes AND the javascript. The BS docs (see Usage) are not clear that these are distinct alternatives, but it works fine with either one independently (data attributes OR JS).

本文标签： javascriptBootstrap collapseStack Overflow

版权声明：本文标题：javascript - Bootstrap collapse - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745046392a2639390.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。