您好,我正在尝试使用 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-
前缀。
最佳答案
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/