当只点击一个下拉按钮时,为什么所有其他下拉按钮都会丢失它们?

时间:2016-05-05 16:48:44

标签: drop-down-menu zurb-foundation slim-lang zurb-foundation-5

我认为这是:(按钮只取自基金会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)

因此,如果用户已经读过一本书,那么按钮上的文字就是"阅读"并且有一个选项"从阅读清单中移除"当你点击它。但是,当您单击该按钮时,其他书籍附近的所有按钮也会删除其菜单。 http://upload.akusherstvo.ru/image1010700.jpeg enter image description here

此外,正如您所看到的,这些菜单会向下移动以及它们的值(根据用户是否读取而添加或删除)

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

1 个答案:

答案 0 :(得分:2)

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