Question

我想使用此处的选项：

http://materializecss.com/dropdown.html#options （文档不要这么说）。

我的应用程序是一个使用物化宝石与资产的rails应用程序管道

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

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,
});

Answer 2

的解决！

最后就像在这里说http://archives.materializecss.com/0.100.2/dropdown.html#options

解决说法：

要使用这些内联，您必须将它们添加为数据属性。如果你想要更多动态控制，你可以使用jQuery插件定义它们下方。

那么，就像这样：

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

完成我想要的内容

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);
});

实现下拉选项

3 个答案:

的解决！