如何跨多个按钮共享下拉菜单定义答案

【问题标题】：How can I share the dropdown menu definition accross multiple buttons如何跨多个按钮共享下拉菜单定义
【发布时间】：2016-08-23 07:51:47
【问题描述】：

我表格中的每一行都有一个显示“编辑、删除”的下拉菜单。如果我的表中有 100 行，我就有 100 个相同的下拉菜单定义。

是否可以只定义一个下拉菜单并将其用于我的所有下拉按钮？它似乎有效，但下拉菜单未显示在正确的位置。有没有办法告诉下拉菜单将他的位置更改为另一个？

<a data-toggle="dropdown" href="#unique-dropdown">Button1</a>
<a data-toggle="dropdown" href="#unique-dropdown">Button2</a>

<div class="dropdown" id="unique-dropdown">
    <ul class="dropdown-menu">
        <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
        <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
    </ul>
</div>

【问题讨论】：

标签： twitter-bootstrap-3

【解决方案1】：

实际上，你真的很接近得到你想要的......

看看这个样本：http://jsfiddle.net/1jfe3wju/2/

html:

<a class="uniquedd" data-toggle="dropdown" aria-expanded="false" data-info="idofwhatyouwanttoeditordelete" href="#unique-dropdown">Button1</a>
<a class="uniquedd" data-toggle="dropdown" aria-expanded="false" data-info="otheridofwhatyouwanttoeditordelete" href="#unique-dropdown">Button2</a>

<div class="dropdown" id="unique-dropdown">
    <ul class="dropdown-menu">
        <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
        <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
     </ul>
</div>

js:

$('.uniquedd').click(function(e) {
    e.preventDefault();
    var that = $(this);
    var p = that.offset();
    actOverWhat = that.data('info');

    //change the actions of the buttons edit and delete

   //check if open
   isOpen = $("#unique-dropdown").hasClass('open');

   if( isOpen ) {
      that.dropdown('toggle');
   }

    $("#unique-dropdown").offset({ top: (p.top + 15), left: p.left });  
});

offset 与文档相关，所以如果页面很大可能无济于事，但你有 jquery .position();

【讨论】：

很有趣，但它的工作方式有一个小错误。如果您单击第一个按钮打开下拉菜单，然后单击按钮 2，它只会关闭下拉菜单。您必须再次按下按钮 2 才能显示它。正常的行为应该是当你点击button2时，它会关闭第一个并打开第二个。
打开和关闭事件由锚点中的 data-toggle="dropdown" 管理...我已经更新了代码...我将编辑答案。你仍然需要做改变按钮行为的部分，所以如果你点击按钮 1，编辑附加到 button1 的内容，如果你点击 button2 改变你正在编辑（或删除）的内容

【解决方案2】：

您可以使用更少的 js 代码。您只需在每次单击应显示菜单的元素时将 class="dropdown-menu" 附加到 class="dropdown" div。

看这个例子：https://jsfiddle.net/espriella/b4mztvnz/

$CHdropdown = $('#ColumnHeaderDropdownId');
$('.sharingdropdown').click(function(e) {
  $(this).append($CHdropdown);
});

这是 HTML 示例：

<table class="table table-striped table-bordered" id="ChartContentGridId">
  <thead>
    <tr>
      <th>
        <div contenteditable style="float:left">Series 1</div>
        <div class="dropdown sharingdropdown" style="float:right">
          <button class="btn btn-xs btn-success dropdown-toggle" data-toggle="dropdown" href="#">
            <i class="fa fa-caret-down" aria-hidden="true"></i>
          </button>
        </div>
      </th>
      <th>
        <div contenteditable style="float:left">Series 2</div>
        <div class="dropdown sharingdropdown" style="float:right">
          <button class="btn btn-xs btn-success dropdown-toggle" data-toggle="dropdown" href="#">
            <i class="fa fa-caret-down" aria-hidden="true"></i>
          </button>
        </div>
      </th>
      <th width="20px"></th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>
<ul class="dropdown-menu pull-right" id="ColumnHeaderDropdownId">
    <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="fa fa-times"></i> Delete</a></li>
</ul>

【讨论】：