javascript - 使用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