Question

我正在迭代即将到来的＆＃39;指南＆＃39;。每个指南都带有描述，可能有点长，占用了大量空间。所以，我试图实施引导程序＆＃39; collapse＆＃39;然而，它并不适合动态生成的内容，（每个数据切换都需要是unqiue ..不是吗？）所以当我按下按钮时它只激活一个。

<% if @guide.any? %>    
<% @guide.each do |guide| %>
    <div class="guide-list col-md-5">
        <h2 class='guide-title'><%= guide.title %></h2>
        <h4 class='guide-date'>From <%= guide.date_starting.strftime("%B %d") %> to <%= guide.date_ending.strftime("%B %d") %></h4>
        <div class='col-md-12'>
            <%= image_tag guide.image(:med), :class => 'guide-image' %>
            <% if guide.description.empty? %>
                <h4>No description available</h4>
            <% else %>
                <p class='guide-description'><%= guide.description %></p>
            <% end %>
        </div>
        <h4><%= guide.extra_info %></h4>
    </div>
<% end %>
<% else %>
<h1>PLEASE COME BACK SOON </h1>
<% end %>

我有这个代码，我在以前的应用程序中使用过，我花了很多时间尝试为我当前的应用程序配置它，但我只是不能！我的Javascript还有很多不足之处。

$(document).ready(function() {
  return $(".comment-link").on("click", function(event) {
    var commentArea, postUrl;
    event.preventDefault();
    postUrl = $(this).data("post-url");
    commentArea = $(this).closest('.comment-price').find('.comments');
    return $.get(postUrl, function(post) {
      post.comments.forEach(function(comment) {
        return commentArea.html("<li>" + comment.content + "</li> - comment added @ " + comment.added + " by " + comment.username);
      });
      if (commentArea.is(':visible')) {
        return commentArea.slideUp();
      } else {
        return commentArea.slideDown();
      }
    });
  });
});

非常感谢任何帮助

Answer 1

基本上，您的问题是您需要指定在单击触发器时要切换的区域。处理此问题的最佳方法是使用jQuery parent（）方法。

例如：

$(document).ready(function() {
  // The jQuery selectors you want to use as triggers
  var selectors = $('.guide-list .guide-title');
  selectors.click(function() {
    var selector = $(this);  // The element that was clicked
    var parent = selector.parent(); // The parent element of that element
    var target = parent.find('.guide-description'); // The element to expand/collapse
    if(target.is(':visible')) {
      target.slideUp();
    } else {
      target.slideDown();
    }
  }
}

Answer 2

我设法通过最后使用bootstrap.js崩溃来实现。我只是动态创建了id链接。

             <div class="accordion" id="categories">
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion" href="  #info_<%= guide.id %>">
                        <h2 class='glyphicon glyphicon-info-sign'></h2>
                    </a>
                    <div id="info_<%= guide.id %>" class="accordion-body collapse">
                        <div class="acccordion-inner">
                            <% if guide.description.empty? %>
                                    <h4>No description available</h4>
                                <% else %>
                                    <p class='guide-description'><%= guide.description %></p>
                                <% end %>
                        </div>
                    </div>
                  </div>
                </div>

使用jquery但具有动态内容的可折叠描述

2 个答案: