javascript - 如何创建 Alloy UI 下拉菜单

Question

您好，我正在尝试使用 Alloy UI 创建下拉菜单。

<link rel="stylesheet" href="alloy2/aui-css/css/bootstrap.css"/>
<script src="alloy2/aui/aui-min.js"></script>

<div class="aui-dropdown"  id="drp">
    <a class="aui-dropdown-toggle" data-toggle="dropdown" href="#menu1">
        Dropdown
        <b class="aui-caret"></b>
    </a>
    <ul class="aui-dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="aui-divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
<script>
   YUI({
   }).use('gallery-bootstrap-dropdown', 'node', function (Y) {
       Y.one('.aui-dropdown-toggle').plug( Y.Bootstrap.Dropdown )
   });
</script>

这是我编写的所有代码。当我按下下 zipper 接时，它的下拉菜单没有出现。我如何让它工作？我正在使用 Alloy UI 版本 2。当我使用 Twitter Boostrap 而不是 Alloy UI 的 Bootstrap 时，它可以工作。这 2 个 Bootstrap 之间的区别在于 Alloy UI 的版本只有 aui- 前缀。

Answer 1

AlloyUI 2.0.0pr5 上缺少此下拉模块，但有一个简单的解决方案。您需要切换 aui-show在 <ul class="aui-dropdown-menu"> 上课.

YUI().use('node', 'node-focusmanager', function (Y) {

  var document = Y.one(document),
      toggler = Y.one('.aui-dropdown-toggle'),
      dropdown = Y.one('.aui-dropdown-menu');

  toggler.on('click', function(e) {
    dropdown.toggleClass('aui-show');
    e.preventDefault();
    e.stopPropagation();
  });

  document.on('click', function() {
    dropdown.removeClass('aui-show');
  });

});

查看它在 JSFiddle 上的工作.

顺便说一句，AlloyUI 2.0.0pr6 已经删除了 aui-前缀。