Bootstrap Складная панель не сбрасывается

Question

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

Вот CSS файлы, которые я использую:

// Loads all of the CSS styling files needed for view pages to display correctly. 
bundles.Add(new StyleBundle("~/Content/css").Include(
      "~/Content/bootstrap.css", 
      "~/Content/jasny-bootstrap.css", 
      "~/Content/PagedList.css", 
      "~/Content/bootstrap-datetimepicker.css", 
      "~/Content/Site.css")); 

Вот все файлы JS я использую:

// Loads all of the JavaScript files that are needed for view pages to function 
// correctly. 
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
      "~/Scripts/moment.js", 
      "~/Scripts/moment-with-locales.js", 
      "~/Scripts/jquery-2.1.4.min.js", 
      "~/Scripts/bootstrap.js", 
      "~/Scripts/jasny-bootstrap.js", 
      "~/Scripts/respond.js", 
      "~/Scripts/bootstrap-datetimepicker.js", 
      "~/Scripts/jquery-ui-i18n.js")); 

, которые затем отображаются с помощью:

@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/bootstrap") 

Теперь для моего фактического кода, где разворачивается панель:

@using (Html.BeginForm("Index", "Item", FormMethod.Get, new { @class = "form-inline" })) 
{ 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" href="#collapse">Collapsible Group</a> 
      </h4> 
     </div> 
     <div id="collapse" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       Everything goes here... 
      </div> 
     </div> 
    </div> 
} 

Любая помощь была бы принята с благодарностью.

Answer 1

попробовать использовать этот шаблон Bootstrap Accordion example с помощью этого теги data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"

Answer 2

Во-первых прочитать по ссылке: http://getbootstrap.com/javascript/#collapse

но следующее поможет:

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a role="button" data-toggle="collapse" href="#collapseID" aria-expanded="false" aria-controls="collapseID">Collapsible Group</a> 
     </h4> 
    </div> 
    <div id="collapseID" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      Everything goes here... 
     </div> 
    </div> 
</div> 

Answer 3

Вы не упомянули, какую версию Бутстрап, который вы используете. По умолчанию Visual Studio устанавливает Bootstrap V 2.x.x, который во многих случаях не поддерживал аккордеон/сбой, V 3.x.x, попробуйте обновить пакет Nuget до последней версии, и вам будет хорошо идти.

Надеюсь, что это поможет.