实现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 - 可折叠

回答

相关问题