2015-11-20 2 views
1

Я использую Bootstrap, но я не могу заставить аккордеон рухнуть. Он ничего не сделает. Любая помощь? Я огляделся и добавил необходимые файлы, но он все равно не сработает. Любая помощь будет оценена по достоинству. Я использую последние файлы Bootstrap с сайта.Bootstrap Accordion Collapse не работает

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <link rel="icon" href="../../favicon.ico"> 
 

 
    <title>title</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/darkly/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- Custom styles for this template --> 
 
    <link href="navbar-fixed-top.css" rel="stylesheet"> 
 

 
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
 
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
</head> 
 

 
<body> 
 

 
    <!-- Fixed navbar --> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">title</a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#about">About</a> 
 
      </li> 
 
      <li><a href="#contact">Contact</a> 
 
      </li> 
 
      <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Action</a> 
 
       </li> 
 
       <li><a href="#">Another action</a> 
 
       </li> 
 
       <li><a href="#">Something else here</a> 
 
       </li> 
 
       <li role="separator" class="divider"></li> 
 
       <li class="dropdown-header">Nav header</li> 
 
       <li><a href="#">Separated link</a> 
 
       </li> 
 
       <li><a href="#">One more separated link</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="http://site.com.au">site.com.au</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <!--/.nav-collapse --> 
 
    </div> 
 
    </nav> 
 

 
    <div class="container"> 
 

 
    <!-- Main component for a primary marketing message or call to action --> 
 
    <div class="jumbotron"> 
 
     <h2><b>site</b></h2> 
 
     <p>site</p> 
 

 
     <div class="bs-example"> 
 
     <div class="panel-group" id="accordion"> 
 
      <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapseOne" class="panel-collapse collapse in"> 
 
       <div class="panel-body"> 
 
       <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a> 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapseTwo" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
       <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a> 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapseThree" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
       <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a> 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 
    <!-- /container --> 
 

 

 
    <!-- Bootstrap core JavaScript 
 
    ================================================== --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="site.com/js/bootstrap.js"></script> 
 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 
 
</body> 
 

 
</html>

ответ

1

Ваш код работает отлично JSFiddle link. Это означает, что у вас могут быть проблемы с вашими сценариями.

У вас неверные bootstrap.js CDN. Просто измените:

<script src="site.com/js/bootstrap.js"></script> 

с этим одним:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

....

<!-- Fixed navbar --> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">title</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a> 
       </li> 
       <li><a href="#about">About</a> 
       </li> 
       <li><a href="#contact">Contact</a> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a> 
         </li> 
         <li><a href="#">Another action</a> 
         </li> 
         <li><a href="#">Something else here</a> 
         </li> 
         <li role="separator" class="divider"></li> 
         <li class="dropdown-header">Nav header</li> 
         <li><a href="#">Separated link</a> 
         </li> 
         <li><a href="#">One more separated link</a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="http://site.com.au">site.com.au</a> 
       </li> 
      </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
</nav> 

<div class="container"> 

    <!-- Main component for a primary marketing message or call to action --> 
    <div class="jumbotron"> 
     <h2><b>site</b></h2> 
     <p>site</p> 

     <div class="bs-example"> 
      <div class="panel-group" id="accordion"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a> 
         </h4> 
        </div> 
        <div id="collapseOne" class="panel-collapse collapse in"> 
         <div class="panel-body"> 
          <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a> 
          </p> 
         </div> 
        </div> 
       </div> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a> 
         </h4> 
        </div> 
        <div id="collapseTwo" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a> 
          </p> 
         </div> 
        </div> 
       </div> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a> 
         </h4> 
        </div> 
        <div id="collapseThree" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a> 
          </p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
1

Ваш код, кажется, работает хорошо для меня: https://jsfiddle.net/gzdtsnLd/

Вы связаны на Bootstrap JS, CSS и jQuery на вашей веб-странице? На вашей странице могут быть конфликты jQuery, которые не позволяют работать?

<div class="bs-example"> 
     <div class="panel-group" id="accordion"> 
      <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a> 
       </h4> 
      </div> 
      <div id="collapseOne" class="panel-collapse collapse in"> 
       <div class="panel-body"> 
       <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a> 
       </p> 
       </div> 
      </div> 
      </div> 
      <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a> 
       </h4> 
      </div> 
      <div id="collapseTwo" class="panel-collapse collapse"> 
       <div class="panel-body"> 
       <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a> 
       </p> 
       </div> 
      </div> 
      </div> 
      <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a> 
       </h4> 
      </div> 
      <div id="collapseThree" class="panel-collapse collapse"> 
       <div class="panel-body"> 
       <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a> 
       </p> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 

    </div> 
Смежные вопросы