Материализовать CSS — сворачиваемый

Я работаю с Materialise 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>

ruby-on-rails css materialize
person Mike    schedule 07.02.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

В вашем assets/application.js попробуйте

//= require jquery2
//= require jquery_ujs

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

person Glenn    schedule 07.02.2015

arrow_upward
0
arrow_downward 

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

person m0bi5    schedule 07.02.2015