Empêcher la duplication des menus déroulants Bootstrap

Question

J'utilise Bootstrap 3 pour créer dropdown menus.

Cela fonctionne très bien, mais j'ai exactement le même menu sur chaque ligne d'une table. Ajouter le menu pour chaque rangée dans la table me semble une grande perte. En outre, cela m'empêche d'attribuer un identifiant unique aux éléments de menu.

Est-ce que quelqu'un est familier avec un moyen d'utiliser le menu déroulant Bootstrap pour assigner un seul menu là où il le faut, en réponse à un clic sur l'élément? Plutôt que de redéfinir le menu partout où il pourrait être nécessaire?

Answer 1

cela pourrait vous aider, afin d'obtenir ce que vous vouliez

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