Question

我有一个使用MaterialiseCSS运行的Rails应用程序。我通常使用应用程序中的许多地方实现包括JS对象（如FAB按钮），它们都可以正常工作......除了下拉按钮。

我有一段代码，我在模态窗体上加载modal form我有两个需要JS的材质块组件：1）可折叠列表和2）下拉列表。可折叠列表工作正常，但下拉列表没有。

以下代码使其运行（或不运行:-(）。我正在使用coffeescript和haml：

这会初始化模态：

modalInit: () ->
  $('#photo-modal').modal
    dismissible: true
    opacity: .5
    in_duration: 300
    out_duration: 200
    starting_top: '4%'
    ending_top: '10%'
    ready: (modal, trigger) ->
      App.PhotoTaginput.refresh()
      $('.collapsible').collapsible();
      $('.dropdown-button').dropdown();

请注意，可折叠和下拉列表以相同的方式初始化!!

我用这个脚本加载模态：

showModal: (element) ->
  _this = this
  photoId = $(element).parents('.photo-widget').data("photoid")
  url = '/photos/' + photoId + '?view=modal'
  $('#photo-modal > .modal-content').load url, (result) ->
    $('#photo-modal').modal('open');

这会获取一些如下所示的HTML：

.row
  .image_info#photo_id{:photo_id=>@photo.id, "data-photo_id"=>@photo.id}
    .col.l5
      .modal-toolbar
        %a.waves-effect.waves-light.btn.like{:type => "button", :class=>current_user.voted_for?(@photo) && "red"}
          %i.fa.fa-thumbs-o-up
        %a.dropdown-button.btn{"data-activates" => "dropdown1", :href => "#"} Drop Me!
        %ul#dropdown1.dropdown-content
          %li
            %a{:href => "#!"} one
          %li
            %a{:href => "#!"} two
          %li.divider
          %li
            %a{:href => "#!"} three

    .col.l12#modal_image
      %img.bg.responsive-img{:src => "#{@photo.url('org')}"}



    %ul.collapsible.overlay-menu.overlay-menu-show{"data-collapsible"=>"accordion"}
      %li
        .collapsible-header.overlay-menu-header
          %i.material-icons info
          info
        .overlay-menu-body.collapsible-body
          %table
            %tbody
              %tr
                %td Date
                %td=@photo.date_taken_formatted
              %tr
                %td ID
                %td=@photo.id
              %tr
                %td Country
                %td=@photo.location.country
              %tr
                %td Model
                %td=@photo.model
              %tr
                %td Make
                %td=@photo.make

它必须与JS有关，它动态地应该初始化下拉列表。我这样说是因为当我按下按钮时，我可以看到下拉列表中的css没有改变。它有点奇怪，因为它的初始化方式与可折叠的方式相同。

我很确定正确加载了jquery和实现库。我已经在其他代码部分使用两个lib吞并应用程序

Answer 1

Documentation表示您必须在动态创建它时对其进行初始化。

jQuery插件初始化

只有在创建下拉列表时才需要初始化下拉列表动态。

  $('.dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrain_width: false, // Does not change width of dropdown to that of the activator
      hover: true, // Activate on hover
      gutter: 0, // Spacing from edge
      belowOrigin: false, // Displays dropdown below the button
      alignment: 'left' // Displays dropdown with edge aligned to the left of button
    }
  );

Answer 2

原来是一些HTML加强了。

我不小心装了几次这个部分：

    %a.dropdown-button.btn{"data-activates" => "dropdown1", :href => "#"} Drop Me!
    %ul#dropdown1.dropdown-content
      %li
        %a{:href => "#!"} one
      %li
        %a{:href => "#!"} two
      %li.divider
      %li
        %a{:href => "#!"} three

这导致了HTML中#dropdown1的几个id，这搞砸了下拉列表的初始化。

无法获取Materialise css下拉列表以使用动态加载的模态

2 个答案: