Bootstrap/Jquery accordion не работает должным образом

Я создал простой аккордеон в JSfiddle (http://jsfiddle.net/Rnpb2/), и он отлично работает. Однако, когда я пытаюсь воспроизвести результат на моем сайте, он просто не работает. Нажатие на элементы просто добавляет #first, #second и # третье в конце URL. Наверное, потому что я новичок, проблема легко разрешима, но я не могу ее найти. Вот весь код моей страницы:Bootstrap/Jquery accordion не работает должным образом

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"/> 
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"/> 
    <link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery-ui.css"/> 
    <link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.accordion.css"/> 
    <link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.all.css"/> 
    <script src="lib/bootstrap.min.js"></script> 
    <script src="lib/fabric.min.js"></script> 
    <script src="lib/jquery-ui-1.10.4/jquery-1.10.2.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/jquery.ui.core.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/jquery.ui.accordion.js"></script> 


</head> 
<body> 

<div id="page"> 
    <header class="container"> 
     <div id="menu" class="navbar navbar-default"> 
      <ul class="nav navbar-nav"> 
       <li class="nav active"><a href="home.html">Home</a></li> 
       <li class="nav"><a href="login.php">Login</a></li> 
       <li class="nav"><a href="about.html">About</a></li> 
       <li class="nav" ><a href="contact.html">Contact</a></li> 
      </ul> 
     </div> 
    </header> 
</div> 




    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <div id="accordion" class="panel-group"> 
        <div class="panel panel-info"> 
         <div class="panel-heading"> 
          <div class="panel-title"> 
          <a href="#first" 
           data-toggle="collapse" 
           data-parent="#accordion">Shape</a> 
          </div> 
         </div> 
         <div class="panel-collapse collapse" id="first"> 
          <div class="panel-body"> 
           <p> First <p/> 
          </div> 
         </div> 
        </div> 

        <div class="panel panel-info"> 
         <div class="panel-heading"> 
          <div class="panel-title"> 
           <a href="#second" 
            data-toggle="collapse" 
            data-parent="#accordion">Shape</a> 
          </div> 
         </div> 
         <div class="panel-collapse collapse" id="second"> 
          <div class="panel-body"> 
           <p> Second <p/> 
          </div> 
         </div> 
        </div> 

        <div class="panel panel-info"> 
         <div class="panel-heading"> 
          <div class="panel-title"> 
           <a href="#third" 
            data-toggle="collapse" 
            data-parent="#accordion">Shape</a> 
          </div> 
         </div> 
         <div class="panel-collapse collapse" id="third"> 
          <div class="panel-body"> 
           <p> Third <p/> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 


      <div class="col-md-4"> 

      </div> 

      <div class="col-md-4"> 

      </div> 
     </div> 
    </div>  
</body> 
</html>

я добавил так много различных источников в попытке заставить его работать, но безрезультатно. Я добавлял их один за другим.

источник

2014-01-21 user2315641

Не могли бы вы также добавить свой сайт? –

Перед загрузкой загрузочного буфера загрузите jquery. Если вы посмотрите на свою консоль, вы можете увидеть ошибку. Также вы должны поместить свои скрипты в нижней части html, чтобы ваши сценарии не блокировали пользовательский интерфейс от загрузки.

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"/> 
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"/> 
    <link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery-ui.css"/> 
    <link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.accordion.css"/> 
    <link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.all.css"/> 
</head> 
<body> 

<div id="page"> 
    <header class="container"> 
     <div id="menu" class="navbar navbar-default"> 
      <ul class="nav navbar-nav"> 
       <li class="nav active"><a href="home.html">Home</a></li> 
       <li class="nav"><a href="login.php">Login</a></li> 
       <li class="nav"><a href="about.html">About</a></li> 
       <li class="nav" ><a href="contact.html">Contact</a></li> 
      </ul> 
     </div> 
    </header> 
</div> 




    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <div id="accordion" class="panel-group"> 
        <div class="panel panel-info"> 
         <div class="panel-heading"> 
          <div class="panel-title"> 
          <a href="#first" 
           data-toggle="collapse" 
           data-parent="#accordion">Shape</a> 
          </div> 
         </div> 
         <div class="panel-collapse collapse" id="first"> 
          <div class="panel-body"> 
           <p> First <p/> 
          </div> 
         </div> 
        </div> 

        <div class="panel panel-info"> 
         <div class="panel-heading"> 
          <div class="panel-title"> 
           <a href="#second" 
            data-toggle="collapse" 
            data-parent="#accordion">Shape</a> 
          </div> 
         </div> 
         <div class="panel-collapse collapse" id="second"> 
          <div class="panel-body"> 
           <p> Second <p/> 
          </div> 
         </div> 
        </div> 

        <div class="panel panel-info"> 
         <div class="panel-heading"> 
          <div class="panel-title"> 
           <a href="#third" 
            data-toggle="collapse" 
            data-parent="#accordion">Shape</a> 
          </div> 
         </div> 
         <div class="panel-collapse collapse" id="third"> 
          <div class="panel-body"> 
           <p> Third <p/> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 


      <div class="col-md-4"> 

      </div> 

      <div class="col-md-4"> 

      </div> 
     </div> 
    </div> 
    <script src="lib/jquery-ui-1.10.4/jquery-1.10.2.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/jquery.ui.core.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/jquery.ui.accordion.js"></script> 
    <script src="lib/bootstrap.min.js"></script> 
    <script src="lib/fabric.min.js"></script> 
</body> 
</html>

В jsfiddle вы в курсе, если вы проверяете результаты вы увидите, что загрузчик загружается после того, как JQuery.

<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title> - jsFiddle demo</title> 

    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 

    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 

    <style type="text/css"> 
     @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); 
     .panel-heading { 
      cursor: pointer; 
     } 
    </style> 

    <script type="text/javascript">//<![CDATA[ 
     $(window).load(function(){ 

     });//]]> 
    </script> 

</head>

источник

2014-01-21 11:23:54 psyrendust

Я знал, что все так просто, и я просто делал ошибки новичка. Большое спасибо. – user2315641

Bootstrap/Jquery accordion не работает должным образом

ответ

Смежные вопросы