Question

我正在使用Bootstrap 3和Ruby on Rails（Rails Tutorial Sample App）。在我的应用程序中，用户可以喜欢（“品尝”）微博（“pops”）。当帖子上有超过零的喜欢时，我希望'＃likes'显示按钮在下拉菜单中显示喜欢用户的Gravatar图标。我或多或少都在工作。但是，当我单击按钮并打开下拉菜单时，它会在几秒钟内自动关闭。我希望它保持打开状态，直到用户点击其中一个缩略图或页面上的其他位置（或再次点击按钮）。我没有看到的例子（没有一个有这个问题）以这种方式使用图像缩略图，并且通常只在下拉列表中有序列表。我是否正确地解决了这个问题，还是有更好的方法？

另外，在实现javascript / jQuery时，我是一个完整的n00b。我理解代码，但我永远无法弄清楚我需要把它放在哪里以及我需要提到/需要它来让我的代码工作。因此，如果有一个javascript / jQuery修复此问题，请让我知道它需要去哪里。

注意：这与之前提出的另一个问题不同，当您点击它时，下拉菜单会消失。如果我很快，我可以点击缩略图并访问链接就好了。问题是菜单通常会在几秒钟之后消失，之后我可以点击任何东西（当我把光标放在它上面时）。这在移动设备上尤其令人沮丧，因为当您即将点击缩略图时，下拉列表始终会关闭。

_micropost.html.erb

<li id="micropost-<%= micropost.id %>">
  <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
  <span class="user"><%= link_to micropost.user.name, micropost.user %></span>
  <span class="content">
    <%= micropost.content %>
    <%= image_tag micropost.picture.url if micropost.picture? %>
  </span>

  <span class="timestamp">
    Popped <%= time_ago_in_words(micropost.created_at) %> ago.
    <span class="dropdown">
      <% if micropost.likers(User).count == 0 %>
        <div id="like">
          <%= pluralize(micropost.likers(User).count, "savor", "savors") %>
        </div>
      <% else %>
        <div class="btn-group"> //button dropdown
          <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" data-target="#" aria-haspopup="true" aria-expanded="false">
            <%= pluralize(micropost.likers(User).count, "savor", "savors") %>
            <span class="caret"></span>
          </button>
          <div class="user_avatars dropdown-menu" aria-labelledby="dropdownMenu1">
            <% micropost.likers(User).each do |user| %>
              <%= link_to gravatar_for(user, size: 30), user %>
            <% end %>
          </div>
        </div>
      <% end %>

      <% if current_user.likes?(micropost) %>
        <%= content_tag(:div, "Savored", class: "btn btn-xs btn-primary", disabled: true) %>
      <% elsif (current_user != micropost.user) %>
        <%= link_to 'Savor', micropost, action: :update, method: :put, class: "btn btn-xs btn-primary" %>
      <% else %>
      <% end %>
      <% if current_user?(micropost.user) %>
        <%= link_to "delete", micropost, method: :delete,
                                         data: { confirm: "You sure?" } %>
      <% end %>
    </span>
  </span>
</li>

来自custom.css.scss的

.user_avatars {
  overflow: auto;
  margin-top: 10px;
  .gravatar {
    margin: 1px 1px;
  }
  a {
    padding: 0;
  }
}

提前致谢。

Answer 1

知道了，帖子表单设置为每5000毫秒刷新一次，所以它一直关闭菜单。将其更改为30000（30秒），一切正常。

罪魁祸首（_feed.html.erb）

<% if @feed_items.any? %>
  <ol class="microposts" id="refreshable">
    <%= render @feed_items %>
  </ol>
  <%= will_paginate @feed_items %>
<% end %>

<!--make feed refreshable -->
<script>
  setInterval( function() {
    $("#refreshable").load(location.href+" #refreshable>*", "");
  }, 30000);
</script>

Bootstrap下拉按钮菜单消失

1 个答案: