Question

我正在使用Bootstrap 3创建dropdown menus。

它工作正常，但我在表格的每一行都有完全相同的菜单。为表格中的每一行添加菜单对我来说似乎是一个很大的浪费。此外，它阻止我为菜单项分配唯一的ID。

是否有人熟悉使用Bootstrap下拉菜单在任何需要的地方分配单个菜单，以响应所点击的项目？可能需要在任何地方重新定义菜单？

Answer 1

这可能对您有所帮助，以实现您想要的目标

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

防止重复Bootstrap下拉菜单

1 个答案: