Question

在点击另一个按钮时，有一些问题是让Bootstrap按钮下拉菜单切换（使列表项和下拉ul元素可见）。这是我到目前为止似乎没有用的东西（v3.3.7）。我希望“测试”按钮另外切换“测试”按钮下拉列表。

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

Answer 1

您可以使用自定义属性data-target来定位按钮组，因此单击外部任何元素都会触发目标按钮组的下拉。

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

您应该为您的按钮组添加ID，以便data-target更具体。

Demo

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>

使用另一个按钮切换引导按钮下拉列表

2 个答案: