Duplizierung der Bootstrap-Dropdown-Menüs verhindern

Question

Ich verwende Bootstrap 3, um zu erstellen.

Es funktioniert gut, aber ich habe das gleiche Menü auf jeder Zeile einer Tabelle. Das Hinzufügen des Menüs für jede Zeile in der Tabelle scheint mir eine große Verschwendung. Außerdem verhindert es, dass ich Menüelementen eine eindeutige ID zuweisen kann.

Ist jemand mit der Verwendung des Dropdown-Menüs Bootstrap vertraut, um ein einzelnes Menü als Reaktion auf das angeklickte Objekt zu definieren, wo immer es benötigt wird? Anstatt das Menü überall neu zu definieren, wo es benötigt wird?

Answer 1

dies könnte Ihnen helfen, um zu erreichen, was Sie

wollte

//save the selector so you don't have to do the lookup everytime 
 
$dropdown = $("#contextMenu"); 
 

 
$(".linktodisplay").click(function() { 
 
    //get row ID 
 
    var id = $(this).closest("tr").children().first().html(); 
 

 
    //move dropdown menu 
 
    $(this).after($dropdown); 
 

 
    
 
    //show dropdown 
 
    $(this).dropdown(); 
 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> 
 
<table id="myTable" class="table table-hover"> 
 
    <thead> 
 
     <tr> 
 
      <th>#</th> 
 
      <th>test 1</th> 
 
      <th>test 2</th> 
 
      <th>test 3</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>Harry</td> 
 
      <td>sahil</td> 
 
      <td class="dropdown"> <a class="btn btn-default linktodisplay" data-toggle="dropdown" href="#"> 
 
        Click me 
 
       </a> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>sahil</td> 
 
      <td>nimish</td> 
 
      <td class="dropdown"> <a class="btn btn-default linktodisplay" data-toggle="dropdown" href="#"> 
 
        click me 2 
 
       </a> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>anu</td> 
 
      <td>potter</td> 
 
      <td class="dropdown"> <a class="btn btn-default linktodisplay" data-toggle="dropdown" href="#"> 
 
        click me 3 
 
       </a> 
 

 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
<ul id="contextMenu" class="dropdown-menu" role="menu"> 
 
    <li><a tabindex="-1" href="#" class="itemlink1">Item1</a> 
 

 
    </li> 
 
    <li><a tabindex="-1" href="#" class="itemlink2">Item2</a> 
 

 
    </li> 
 
</ul>