2

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

4

1 回答 1

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

于 2013-07-17T20:31:14.377 回答