Question

我表格中的每一行都有一个显示“编辑，删除”的下拉菜单。如果我的表中有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>

Answer 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 });  
});

偏移是与文档相关的，所以可能如果页面很大没有帮助，但你有jquery .position（）;

Answer 2

您可以使用更少的js代码。你需要做的就是＆＃34;追加＆＃34;你的班级=＆＃34;下拉菜单＆＃34;到了班级=＆＃34;下拉＆＃34;每次单击应显示菜单的元素时都使用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>

如何在多个按钮之间共享下拉菜单定义

2 个答案: