物化 CSS - 可折叠答案

【问题标题】：Materialize CSS - Collapsible物化 CSS - 可折叠
【发布时间】：2015-02-07 06:07:38
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： css ruby-on-rails materialize

【解决方案1】：

这可能是因为 Materialize 需要 JQuery 2.1.1 而 Rails 使用 1.11.2。

在您的 assets/application.js 中尝试

//= require jquery2
//= require jquery_ujs

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

【讨论】：

【解决方案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/

【讨论】：