jquery - Bootstrap 下拉按钮菜单消失

Question

我将 Bootstrap 3 与 Ruby on Rails(Rails 教程示例应用程序)结合使用。在我的应用程序中，用户可以喜欢(“品味”)微博(“流行”)。当帖子上的点赞数超过零时，我希望“# likes”显示按钮在下拉菜单中显示点赞用户的 Gravatar 图标。我或多或少地工作。但是，当我单击按钮并打开下拉菜单时，它会在几秒钟内自动关闭。我希望它保持打开状态，直到用户单击其中一个缩略图或页面上的其他位置(或再次单击按钮)。我看过的所有示例(都没有这个问题)都没有以这种方式使用图像缩略图，并且通常在下拉列表中只有有序列表。我这样做是否正确，还是有更好的方法？

此外，在实现 javascript/jQuery 方面，我完全是个菜鸟。我理解代码，但我永远无法弄清楚我需要把它放在哪里以及我需要提及/要求它以使我的代码正常工作的地方。因此，如果有针对此问题的 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

明白了，post表单设置为每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>