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

Question

我有这样的看法：（按钮刚从基础上取下来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)' 等。请分享您的想法，如果您可能知道如何使这些下拉菜单不与按钮分开生活，以及如何使它们不一起点击。提前致谢！

Answer 1

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

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

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

drop-down-menu

zurb-foundation

slim-lang

zurb-foundation-5