为什么当只单击一个下拉按钮时，所有其他下拉按钮都会删除其菜单？

Jakov 发表于 Dev

雅科夫

我的观点是这样：（按钮仅来自基金会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)

因此，如果用户已经阅读了一本书，则按钮上的文本为“已读”，单击该按钮时会有一个选项“从已读列表中删除”。但是，当您单击该按钮时，其他书籍附近的所有按钮也会删除其菜单。

而且，如您所见，这些菜单及其值将向下移动（根据用户是否阅读来添加或删除）

因此，我确定它是由于循环书而发生的。但是，如果我将其删除，则将无法使用我的方法“ add_to_my_books_path（book）”等。如果您知道如何使这些下拉菜单与自己的生活分开生活，请分享您的想法按钮，以及如何使它们不会同时单击。先感谢您！

格雷格·塔尔萨（Greg Tarsa）

您所有的下拉菜单都具有相同的ID。尝试从诸如book.id之类的内容中构建下拉列表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)