javascript - Toggle bootstrap button dropdown using another button - Stack Overflow

admin管理员组

文章数量:1328949

Been having some issues getting a Bootstrap button dropdown to toggle (making the list items and dropdown ul element visible) when another button is clicked. Here's what I have so far which doesn't seem to work (v3.3.7). I want the "testing" button to additionally toggle the "test" button dropdown.

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

Been having some issues getting a Bootstrap button dropdown to toggle (making the list items and dropdown ul element visible) when another button is clicked. Here's what I have so far which doesn't seem to work (v3.3.7). I want the "testing" button to additionally toggle the "test" button dropdown.

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

• javascript
• css
• twitter-bootstrap

Share Follow edited Feb 27, 2017 at 1:12 darrenc asked Feb 27, 2017 at 0:37 darrencdarrenc 18322 gold badges33 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You can use the custom attribute data-target to target the button group, so clicking on any element outside will trigger the dropping-down on the targeted button group.

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

You should give your button group an id, so that the data-target is more specific.

Demo

Try .toggle('dropdown') instead of .dropdown('toggle'):

<script src="https://ajax.googleapis./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>

本文标签： javascriptToggle bootstrap button dropdown using another buttonStack Overflow