一个单一的引导程序下拉菜单，用于多个元素

Question

我有多个按钮。我希望它们都显示相同/单个dropdown-menu元素，而不是每个元素都有单独的dropdown-menu。

我希望可以利用data-target属性来做到这一点。

此外，我希望能够在任何元素上显示此下拉菜单。就我而言，是表中的th元素。我试图使它首先与按钮配合使用（然后可能要尝试使用th元素），所以我直接从引导带文档中复制了此信息并进行了少许修改，但这是行不通的。我想要的Bootstrap下拉菜单有可能吗？

<link   href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class='row mb-1'>
    <div class='col-4'></div>
    <div class='col-4'>
        <button class="btn btn-secondary dropdown-toggle" data-target='.test-menu' type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
    </div>
    <div class='col-4'></div>
</div>

<div class='row mb-1'>
    <div class='col-4'></div>
    <div class='col-4'>
        <button class="btn btn-secondary dropdown-toggle" data-target='.test-menu' type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
    </div>
    <div class='col-4'></div>
</div>

<div class='row mb-1'>
    <div class='col-4'></div>
    <div class='col-4'>
        <button class="btn btn-secondary dropdown-toggle" data-target='.test-menu' type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
    </div>
    <div class='col-4'></div>
</div>


<div class="dropdown-menu test-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

当我单击三个按钮中的任何一个时，什么都没有发生。

Answer 1

您无需使用data-target属性即可具有多个下拉开关来控制相同的下拉菜单。实际上，下拉列表中没有data-target。

这里的技巧是将下拉菜单的切换开关和下拉菜单包装到位置设为 relative （即position: relative;）的任何位置。

在下面的示例中，我用<div class="dropdown" />包裹了它们。

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle">...</button>
    <button class="btn btn-secondary dropdown-toggle">...</button>
    <button class="btn btn-secondary dropdown-toggle">...</button>

    <div class="dropdown-menu">
        <a class="dropdown-item">...</a>
        <a class="dropdown-item">...</a>
        <a class="dropdown-item">...</a>
    </div>
</div>

演示： https://jsfiddle.net/davidliang2008/a0k7uqj1/28/

为使下拉切换和下拉菜单正常工作，它们必须彼此为兄弟。因此，我认为这不适用于表中的任何<th>元素，例如，因为该元素在其中具有更多的嵌套级别，即<tr>，<thead>等。