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

您好，我正在尝试使用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>

这就是我编写的所有代码。当我按下下拉链接时，其下拉菜单不会出现。我如何使其工作？我正在使用Alloy UI版本2。当我使用Twitter Boostrap代替Alloy UI的引导程序时，它可以工作。这两个引导程序之间的区别在于，Alloy UI的版本仅以aui-开头。

最佳答案

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-前缀。

关于javascript - 如何创建Alloy UI下拉菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16384321/