Материализовать CSS - Складывающийся

Question

Я работаю с Materialize CSS и используя складной элемент стиля аккордеона (http://materializecss.com/collapsible.html).

По какой-то причине, как только я нажимаю, чтобы открыть элемент, он немедленно закрывается.

Вот мой код. Моя цель состоит в том, чтобы иметь возможность использовать складные, как предполагалось (т. Е. С открытием элемента и остающимся открытым).

<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> 

Answer 1

Это, вероятно, потому, что материализовать требует JQuery 2.1.1 в то время как Rails использует 1.11.2.

В ваших assests/application.js попробовать

//= require jquery2 
//= require jquery_ujs 

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

Answer 2

$(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/