Umschalten der Bootstrap-Schaltfläche Dropdown mit einer anderen Schaltfläche

Question

Probleme beim Abrufen einer Dropdown-Schaltfläche für Bootstrap-Schaltflächen (die Listenelemente und das Drop-Down-UL-Element sichtbar machen), wenn auf eine andere Schaltfläche geklickt wird. Hier ist, was ich bisher habe, was nicht zu funktionieren scheint (v3.3.7). Ich möchte, dass die Schaltfläche "Testen" zusätzlich das Dropdown-Menü "Test" schaltet.

<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

Sie die benutzerdefinierte verwenden können Attribut data-target die Schaltfläche Gruppe zum Ziel, so auf ein beliebiges Element klicken außen die dropping- auslösen auf der gezielten Schaltflächengruppe.

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

Sie sollten Ihre Tastengruppe eine ID geben, so dass die data-target mehr spezifisch ist.

Demo

Answer 2

Versuchen .toggle('dropdown') statt .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>