为什么仅单击一个下拉按钮时所有其他下拉按钮都会放弃其菜单?

Why all the other dropdown-buttons drop their menues when only one dropdown-button is clicked?

我有这样的看法:(按钮刚从基础上取下来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)

所以,如果一本书已经被用户阅读,按钮上的文字是"Read",当你点击它时会有一个选项"remove from read list"。但是,当您单击该按钮时,其他书籍附近的所有按钮也会放下它们的菜单。

此外,如您所见,这些菜单及其值都向下移动(添加或删除取决于用户是否阅读)

所以,我确定它的发生是因为循环 books.each 做的。但是如果我删除它,我将无法使用我的方法 'add_to_my_books_path(book)' 等。 请分享您的想法,如果您可能知道如何使这些下拉菜单不与按钮分开生活,以及如何使它们不一起点击。 提前致谢!

您的所有下拉菜单都具有相同的 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)