實現CSS - 可摺疊

我正在處理Materialise CSS並使用摺疊式手風琴式元素（http://materializecss.com/collapsible.html）。實現CSS - 可摺疊

出於某種原因，只要我點擊打開一個項目，它立即關閉。

這是我的代碼。我的目標僅僅是能夠按預期使用可摺疊（即打開元件並保持打開狀態）。

<div style="width:600px; margin:0 auto;"> 
    <ul class="collapsible" data-collapsible="accordion"> 

    <% @friends.each do |friend| %> 
     <li> 
     <% latestTweet = CLIENT.user_timeline(friend.twitterHandle)[0] %> 
      <div class="collapsible-header"> 

      <img src="<%= latestTweet.user.profile_image_url %>" width="40" height="40"><%= link_to friend.firstName + " (" + friend.twitterHandle + ")", "friends/" + friend.id.to_s %><div style="float:right"><%= (Indico.sentiment(latestTweet.text)*100).round %></div> 
      </div> 
      <div class="collapsible-body"> 
      <p> 
       <%= latestTweet.text %> 
      </p> 
      </div> 
     </li> 
     <% end %> 
    </ul> 
    </div>

來源

2015-02-07 Mike

這可能是因爲Materialise的需要的JQuery 2.1.1而Rails使用1.11.2。

在你入資產價值/ application.js中嘗試

//= require jquery2 
//= require jquery_ujs

https://github.com/rails/jquery-rails

來源

2015-02-07 21:10:32 Glenn

$(function() { 
    $("#accordion").accordion(); 
    }); 
<div id="accordian"> 
<div style="width:600px; MARGIN:0 auto;"> 
    <ul class="collapsible" data-collapsible="accordion"> 

    <% @friends.each do |friend| %> 
     <li> 
     <% latestTweet = CLIENT.user_timeline(friend.twitterHandle)[0] %> 
      <div class="collapsible-header"> 

      <img src="<%= latestTweet.user.profile_image_url %>" width="40" height="40"><%= link_to friend.firstName + " (" + friend.twitterHandle + ")", "friends/" + friend.id.to_s %><div style="float:right"><%= (Indico.sentiment(latestTweet.text)*100).round %></div> 
      </div> 
      <div class="collapsible-body"> 
      <p> 
       <%= latestTweet.text %> 
      </p> 
      </div> 
     </li> 
     <% end %> 
    </ul> 
    </div> 
</div>

檢查他們的文檔：http://api.jqueryui.com/accordion/

來源

2015-02-07 06:22:59

實現CSS - 可摺疊

回答

相關問題