javascript - 实现下拉选项

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

实际上，使用 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,
});