如何共享多個按鈕的下拉菜單定義

我表格中的每一行都有一個顯示「編輯，刪除」的下拉菜單。如果我的表格中有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>

來源

2015-08-17 Alexandre Jobin

其實，你真的很接近得到你想要的東西......

看看這個例子：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（）;

來源

2015-08-17 20:54:33 Erwin

有趣的，但有一個與它的工作方式一個小錯誤。如果您點擊第一個按鈕打開下拉菜單，然後點擊按鈕2，則只會關閉下拉菜單。您必須再次按下按鈕2以顯示它。正常的行爲應該是當你點擊button2時，它關閉第一個並打開第二個。 –

開始和結束的事件是通過data-toggle =「dropdown」在錨中進行管理的......我更新了代碼...我將編輯答案。你仍然需要做改變按鈕行爲的部分，所以如果你點擊按鈕1，編輯按鈕1的附件，如果你點擊按鈕2，改變你正在編輯（或刪除）的內容， – Erwin

您可以使用較少的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>

來源

2016-08-22 23:51:47 gus

如何共享多個按鈕的下拉菜單定義

回答

相關問題