Ich verwende Bootstrap 3 mit Ruby on Rails (Rails Tutorial Beispiel App). In meiner App kann ein Benutzer Micropoints ("Pops") mögen ("genießen"). Wenn es mehr als null Likes in einem Beitrag gibt, möchte ich mit der "# Likes" -Anzeige die Gravatar-Symbole der Nutzer in einem Dropdown-Menü anzeigen. Ich arbeite mehr oder weniger. Wenn ich jedoch auf die Schaltfläche klicke und das Dropdown-Menü öffnet, wird es automatisch innerhalb weniger Sekunden geschlossen. Ich möchte, dass es geöffnet bleibt, bis der Benutzer auf eines der Miniaturbilder oder an einer anderen Stelle auf der Seite (oder auf der Schaltfläche) klickt. Keines der Beispiele, die ich angeschaut habe (von denen keines dieses Problem hat), verwendet auf diese Weise Bildminiaturen und hat normalerweise nur Listen im Dropdown-Menü. Gehe ich richtig vor, oder gibt es einen besseren Weg?Bootstrap Dropdown-Menü verschwinden
Darüber hinaus bin ich ein komplettes n00b, wenn es um die Implementierung von Javascript/jQuery kommt. Ich verstehe den Code, aber ich kann nie herausfinden, wo ich ihn hinstellen muss und wo ich ihn erwähnen muss, damit er funktioniert. Also, wenn es einen Javascript/jQuery-Fix für diesen gibt, lass mich bitte genau wissen, wohin es gehen soll.
HINWEIS: Dies unterscheidet sich von einem anderen Problem, das zuvor gefragt wurde, wo das Dropdown-Menü verschwindet, wenn Sie darauf klicken. Wenn ich schnell bin, kann ich auf das Thumbnail klicken und den Link einfach besuchen. Das Problem ist, dass das Menü normalerweise nach ein paar Sekunden verschwindet, bevor ich auf irgendetwas klicken kann (und während ich meinen Cursor darauf habe). Besonders frustrierend ist das auf Mobilgeräten, da das Dropdown-Menü immer schließt, wenn Sie gerade ein Thumbnail antippen.
_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>
von custom.css.scss
.user_avatars {
overflow: auto;
margin-top: 10px;
.gravatar {
margin: 1px 1px;
}
a {
padding: 0;
}
}
Vielen Dank im Voraus.