使用javascript触发下拉列表

Question

我正在使用bootstrap下拉菜单，我想用其他按钮触发它。

<li class="dropdown">
      <a href = "" class="dropdown-toggle" data-toggle="dropdown" role="button" id = "TAdropdown" aria-expanded="false">Insert TA<span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <form class="navbar-form navbar-left" >
          <div class="form-group" id = "TAform">
            <input type="text" class="form-control" placeholder = "Roll Number" required>
            <input type="text" class="form-control" placeholder = "M.A.C address" required>
          </div>
          <button type="submit" class="btn btn-default" onClick = "addMAC()" >+</button>
          <button type="submit" class="btn btn-default" onClick = "removeMAC()" >-</button>
          <button type="submit" class="btn btn-default" onClick = "submitForm()">Submit</button>
        </form>

      </ul>
    </li>

我希望当我点击这个其他按钮时触发（打开）：

  <button type = "submit" class="btn btn-default" onClick = "deleteTA()">delete</button>

即我应该将什么放在deleteTA（）函数中。

Answer 1

在您的情况下，您需要以这种方式切换下拉列表：

function deleteTA(e) {
    $('.dropdown-toggle').dropdown().dropdown('toggle');
    e.stopPropagation();
}

将事件对象传递给函数的位置：

<button type="submit" onClick="deleteTA(event)" class="btn btn-default">delete</button>

在这里停止事件传播非常重要，否则下拉将立即关闭。

演示：http://plnkr.co/edit/TfdnoGdW1CMpbZlHl62A?p=preview

Answer 2

在bootstrap documentation on dropdown（启用了交互式示例）中，它在＆＃34; Usage＆＃34;部分为：

$('.dropdown-toggle').dropdown()

希望有所帮助。