2015-09-14 5 views
0

Я использую меню аккордеона Bootstrap на своем веб-сайте, и на домашней странице он отлично работает, но на любой странице, кроме главной страницы, он просто не работает, когда я нажимаю меню Свернуть ссылку, URL-адрес просто изменяется на #collapseOne.Boostrap CSS аккордеон не рушится на вторичных страницах

Может показаться, что я использую это как ContentHolder внутри Business Catalyst. Вот ссылка на JSFiddle

И here's the website где проблема.

Большое спасибо.

<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"> RC Cars</a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      <ul> 
      <li><h4 class="text-left"><a href="rc-electric-cars ">RC Electric Cars</a></h4></li> 
      <li><h4 class="text-left"><a href="/">RC Petrol Cars</a></h4></li> 
      <li><h4 class="text-left"><a href="/">RC Nitro Cars</a></h4></li> 
      </ul> 
     </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"> RC Trucks</a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      <ul> 
      <li><h4 class="text-left"><a href="rc-electric-cars ">RC Electric Trucks</a></h4></li> 
      <li><h4 class="text-left"><a href="/">RC Petrol Trucks</a></h4></li> 
      <li><h4 class="text-left"><a href="/">RC Nitro Trucks</a></h4></li> 
      </ul> 
     </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"> RC Planes</a> 
     </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      <ul> 
      <li><h4 class="text-left"><a href="rc-electric-cars ">RC Electric Planes</a></h4></li> 
      <li><h4 class="text-left"><a href="/">RC Petrol Planes</a></h4></li> 
      <li><h4 class="text-left"><a href="/">RC Nitro Planes</a></h4></li> 
      </ul> 
     </div> 
    </div> 
</div> 

ответ

2

Это потому, что вы добавили файлы javascript прямо на главную страницу (и не добавили ее на вторичные страницы).

Вы должны двигаться

<!-- jQuery Version 1.11.1 --> 
<script src="js/jquery.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="js/bootstrap.js"></script> 

в «заголовок» содержимое тега (так же, как .css файлы), и он будет работать на всех страницах.

+0

Ааа! Это было ужасно глупо от меня! Огромное спасибо. Теперь он работает правильно! Еще раз спасибо – ConduciveMammal

+0

Привет, извините, что вскрыть это снова, но кажется, что проблема все еще происходит, только на этот раз это три уровня, а не два. Итак, domain.com работает, domain.com/subdirectory работает, но domain.com/subdirectory/nextsubdirectory не работает. Любые идеи @kubik_rubic? – ConduciveMammal

+0

Это происходит потому, что ваши ссылки на локальные .js-файлы не начинаются с «/». Это означает, что вы пытаетесь получить скрипты из «http://radshaperc.businesscatalyst.com/rc-models/js/bootstrap.js», но не из «http://radshaperc.businesscatalyst.com/js/bootstrap.js», , Вы должны добавить «/» для всех локальных путей. Для сценариев это будет и

1

Я просмотрел ваш сайт.

Ваш код (кроме главной страницы) отсутствует ссылка на JQuery JS и Bootstrap JS

<script src="js/jquery.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="js/bootstrap.js"></script></p> 

Добавьте к остальным страницам

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

  • Нет связанных вопросов^_^