实现下拉选项

Question

我想使用这里的选项：

http://materializecss.com/dropdown.html#options （文档没说那么多）

My app is a rails app that use the materialize gem with the asset pipeline.

我的代码现在看起来像这样：

ul#dropdown1.dropdown-content.z-depth-0
    li
      a Profile settings
    li
      a payments
a.dropdown-button.btn-large.btn-flat.waves-effect.menu_trigger href="#!" data-activates="dropdown1"
 i.material-icons menu

javascript:
  var elem = document.querySelector('.menu_trigger');
  var instance = M.Dropdown.init(elem, {
    coverTrigger: false,
    constrainWidth: false,
  });

Answer 1

已解决！

终于像这里说的那样http://archives.materializecss.com/0.100.2/dropdown.html#options

已解决：

To use these inline you have to add them as data attributes. If you want more dynamic control, you can define them using the jQuery plugin below.

那么，像这样：

a.dropdown-button.btn-large.btn-flat.waves-effect href="#!" data-activates="dropdown1" data-beloworigin="true"
  i.material-icons menu

如愿以偿

Answer 2

实际上，使用 data 属性并不总是最好的方法。选项可以（或者更确切地说应该是，如果我错了请纠正我）通过以下方式传递：

// native javascript way
document.addEventListener('DOMContentLoaded', function() {
    var dropdown1 = document.querySelector('.simple-dropdown');
    var dropdownOptions = {
        'closeOnClick': true,
        'hover':true
    }
    var instanceDropdown1 = M.Dropdown.init(dropdown1, dropdownOptions);
});

// Initializing the jQuery way
$(".simple-dropdown").dropdown(
{
    'closeOnClick': true,
    'hover': true,
});

Answer 3

无法直接在 Materialise 文档中找到，但通过反复试验，我发现此 javscript 代码运行良好。看起来预期的选项变量应该是一个具有属性“dropdownOptions”的对象，并分配了另一个具有文档中列出的属性的对象。

document.addEventListener('DOMContentLoaded', function () {
var options = {
    dropdownOptions: {
        alignment: 'right',
        hover: true
    }
}
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems, options);
});

实现下拉选项

Materialize dropdown options

javascript

slim

已解决！