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

Question

我有多个按钮。我希望它们都显示相同/单个的下拉菜单元素，而不是为每个元素提供单独的下拉菜单。

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

此外，我希望能够在任何元素上显示这个单一的下拉菜单。就我而言，表中的第一个元素。我试图让它首先使用按钮（然后可能会继续尝试 th 元素）所以我直接从引导带文档中复制了它并稍作修改，但是它不起作用。引导下拉菜单可以实现我想要的吗？

<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> 等。