Bootstrap可摺疊面板不能打開 - 在控制檯中沒有錯誤

Question

我正在構建一個面板，以在我的Rails 5應用程序中放置可選的搜索表單。目前我正在使用Bootstrap 3作爲我的框架。

面板內置（這裏是）

<div class="panel-group"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" href="#collapse1">Collapsible panel</a> 
     </h4> 
     </div> 
     <div id="collapse1" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      <%= render partial: 'users/search_form/search_form' %> 
     </div> 
     <div class="panel-footer">Panel Footer</div> 
     </div> 
    </div> 
    </div> 

它出現在頁面上，但是當我點擊它，打開它，它不會做任何事情。

我已經瀏覽了bootstrap 3 rails集成過程幾次，我沒有看到它的任何問題。

這裏是我的application.scss文件（及香港專業教育學院試圖重新命名它css.scss一些其他職位建議，但沒有解決問題。

*= require_tree . 
*= require_self 
*/ 
    @import "bootstrap-sprockets"; 
    @import "bootstrap"; 

這裏是我的application.js文件

//= require jquery 
//= require bootstrap-sprockets 
//= require jquery_ujs 
//= require turbolinks 
//= require_tree . 

也不太清楚，我要去哪裏錯了這裏任何幫助，這將是巨大的。

Answer 1

我想你的代碼，它似乎是工作，你不就是意味着，當你點擊「可摺疊PA nel'，隱藏面板應該會出現。請重新檢查。當你點擊'可摺疊面板'文本時，它工作正常。如果您希望在編寫「可摺疊面板」的整個框中顯示面板，只需將「a」標記移動到面板標題類之前即可。就像這樣：

<div class="panel-group"> 
    <div class="panel panel-default"> 
     <a data-toggle="collapse" href="#collapse1"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        Collapsible panel 
       </h4> 
      </div> 
     </a> 
     <div id="collapse1" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <%= render partial: 'users/search_form/search_form' %> 
      </div> 
      <div class="panel-footer">Panel Footer</div> 
     </div> 
    </div> 
</div> 

希望這有助於你:)