Warum löschen alle anderen Dropdown-Tasten ihre Menüs, wenn nur eine Dropdown-Taste gedrückt wird?

Question

ich dies habe meiner Meinung nach: (Tasten sind nur vom Fundament genommen http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown_buttons.html)

- books.each do |book| 
    .row 
    .panel 
     .row 
     .small-9 class='columns' 
      ul 
      li 
       = link_to "#{book.name}", book_path(book) 
     .small-3 class='columns' 
      - if current_user.books.exists?(book.id) 
      button[href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown small secondary"] Read 
      ul[id="drop1" data-dropdown-content class="f-dropdown" aria-hidden="true"] 
       li 
       = link_to "Remove from my read list", delete_from_my_books_path(book) 
      break 
      - else 
      button[href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown small secondary"] Not read 
      ul[id="drop1" data-dropdown-content class="f-dropdown" aria-hidden="true"] 
       li 
       = link_to "Add to my read list", add_to_my_books_path(book) 

Also, wenn ein Buch bereits vom Benutzer gelesen wurde, wird der Text auf der Schaltfläche ist „Lesen“ und es gibt eine Option "aus der Liste entfernen", wenn Sie darauf klicken. Wenn Sie jedoch auf die Schaltfläche klicken, werden auch alle Schaltflächen in der Nähe anderer Bücher angezeigt.

Außerdem ist, wie Sie sehen können, bewegen sich diese Menüs nach unten sowie ihre Werte (Hinzufügen oder Entfernen je nachdem, ob Benutzer sie lesen oder nicht)

Also, ich bin sicher, dass es geschieht, weil der Schleife Bücher.alles tun. Aber wenn ich es entferne, kann ich meine Methoden "add_to_my_books_path (book)" usw. nicht benutzen. Bitte teilen Sie Ihre Ideen mit, wenn Sie wissen, wie Sie diese Drop-Downs nicht von ihrem eigenen Leben trennen können ihre Knöpfe und wie sie nicht alle zusammen klicken. Vielen Dank im Voraus!

Answer 1

Alle Ihre Dropdown-Listen haben dieselbe ID. Versuchen Sie, die Dropdown-ID aus etwas wie dem Buch zu erstellen.id:

- books.each do |book| 
    .row 
    .panel 
     .row 
     .small-9 class='columns' 
      ul 
      li 
       = link_to "#{book.name}", book_path(book) 
     .small-3 class='columns' 
      - dropdown_id = "drop#{book.id}" 
      - if current_user.books.exists?(book.id) 
      button[href="#" data-dropdown=dropdown_id aria-controls="drop1" aria-expanded="false" class="button dropdown small secondary"] Read 
      ul[id=dropdown_id data-dropdown-content class="f-dropdown" aria-hidden="true"] 
       li 
       = link_to "Remove from my read list", delete_from_my_books_path(book) 
      break 
      - else 
      button[href="#" data-dropdown=dropdown_id aria-controls="drop1" aria-expanded="false" class="button dropdown small secondary"] Not read 
      ul[id=dropdown_id data-dropdown-content class="f-dropdown" aria-hidden="true"] 
       li 
       = link_to "Add to my read list", add_to_my_books_path(book)