使用另一个按钮切换Bootstrap按钮下拉菜单

Question

最近我在使用Bootstrap的按钮下拉菜单时遇到了一些问题，希望能够通过点击另一个按钮来切换下拉菜单的显示和隐藏（使列表项和下拉菜单可见）。以下是我目前的代码，但似乎无法实现这个功能（版本为v3.3.7）。我希望“testing”按钮也可以切换“test”按钮的下拉菜单。

<div class="btn-group">
    <a id="test-dropdown-btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Test <span class="caret"></span>
    </a>
    <ul id="test-dropdown" class="dropdown-menu">
        <li><a href="#">test</a></li>
    </ul>
</div>
<a id="test-btn" class="btn btn-default" onclick="$('#test-dropdown-btn').dropdown('toggle')">testing</a>

- darrenc

Answer 1

你可以使用自定义属性 data-target 来定位按钮组，这样点击任何元素都会触发目标按钮组的下拉菜单。

<a id="test-btn" class="btn btn-default" data-toggle="dropdown" data-target=".btn-group">
testing</a>

你应该给按钮组分配一个id，这样data-target就更具体了。

演示

- Hopeless

Answer 2

尝试使用.toggle('dropdown')而不是.dropdown('toggle')：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
    <a id="test-dropdown-btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Test <span class="caret"></span>
    </a>
    <ul id="test-dropdown" class="dropdown-menu">
        <li><a href="#">test</a></li>
    </ul>
</div>
<a id="test-btn" class="btn btn-default" onclick="$('#test-dropdown-btn').toggle('dropdown')">testing</a>

- gyre

---

这将使整个下拉按钮切换关闭，因此它不可见。我正在考虑让实际的下拉菜单出现。 - darrenc