在单击按钮的位置放置下拉菜单答案

【问题标题】：Positioning a Dropdown Where Button Was Clicked在单击按钮的位置放置下拉菜单
【发布时间】：2015-06-19 01:39:47
【问题描述】：

我有一个 Alloy UI Dropdown 组件，我想在用户单击四个按钮之一时呈现 - 此下拉列表应位于单击哪个按钮的左侧

var toolsDropdown = new Y.Dropdown({
    boundingBox: '#my-div',
    trigger: '.option',
    hideOnClickOutSide: true,
    hideOnEsc: true
 }).render();

我希望这个下拉菜单可以在点击按钮的位置呈现（想象这些按钮显示在表格的每一行中）

<div id="my-div">
    <div id="container-1">
        <button id="options-btn-1" class="option"  type="button">Option one</button>
    </div>
    <div id="container-2">
        <button id="options-btn-2" class="option"  type="button">Option two</button>
    </div>
    <div id="container-3">
        <button id="options-btn-3" class="option"  type="button">Option three</button>
    </div>
    <div id="container-4">
        <button id="options-btn-4" class="option" type="button">Option four</button>
    </div>
</div>

我有一个监听器设置来监听每个点击的按钮

Y.all('button.option-btn').on('click', displayDropdown);

但是我在让它正常运行时遇到了一些麻烦（也许我不完全理解 Alloy 的下拉菜单是如何工作的） - 有什么想法吗？

编辑：我认为YUI's Overlay Widget 可能会更好

Overlay 是一个可定位和可堆叠的小部件，它还提供支持标准模块格式布局，带有标题、正文和页脚部分。

【问题讨论】：

标签： javascript jquery html css alloy-ui

【解决方案1】：

试试这个：

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
  <script src="http://cdn.alloyui.com/2.0.0pr5/aui/aui-min.js"></script>
  <link href="http://cdn.alloyui.com/2.0.0pr5/aui-css/css/bootstrap.min.css" rel="stylesheet">
<style>
</style>
</head>
<div id="my-div">
    <div id="container-1">
        <button id="options-btn-1" class="option"  type="button">Option one</button>
    </div>
    <div id="container-2">
        <button id="options-btn-2" class="option"  type="button">Option two</button>
    </div>
    <div id="container-3">
        <button id="options-btn-3" class="option"  type="button">Option three</button>
    </div>
    <div id="container-4">
        <button id="options-btn-4" class="option" type="button">Option four</button>
    </div>

    <button class="btn btn-primary" id="primary">Primary</button>

    <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>


</div>
  <script>
  $(document).ready(function(){

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

          var document = Y.one(document),    
              toggler = Y.one('.aui-dropdown-toggle'),
              dropdown = Y.one('.aui-dropdown-menu'),
              buttonAction = Y.one('#primary'),
              dropDownDiv = Y.one('#drp');
              buttonOne=Y.one("#options-btn-1");
               buttonTwo=Y.one("#options-btn-2");


       buttonAction.on('click', function(e) {
         dropDownDiv.setStyle('top','-20px');
         dropDownDiv.setStyle('left','120px');
        dropdown.toggleClass('aui-show');
        e.preventDefault();
     });

     buttonTwo.on('click', function(e) {
       dropDownDiv.setStyle('top','-125px');
       dropDownDiv.setStyle('left','120px');
      //dropdown.toggleClass('aui-show');
      e.preventDefault();
   }); 


     buttonOne.on('click', function(e) {
       dropDownDiv.setStyle('top','-145px');
       dropDownDiv.setStyle('left','120px');
      //dropdown.toggleClass('aui-show');
      e.preventDefault();
   });


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

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

        });  
  });
  </script>

</body>
</html>

【讨论】：