单击同一链接关闭bootstrap下拉菜单

Question

我有一个bootstrap 3下拉列表，当用户再次单击同一链接时，它应该关闭。

这是我的html：

<li class="dropdown menu-karriere">
  <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="asd">
  Karriere <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" data-lvl="0">
    <li class="menu-ausbildung"><a href="asd">Ausbildung</a></li>
    <li class="menu-geselle"><a href="asd">Geselle</a></li>
    <li class="menu-meister"><a href="asd">Meister</a></li>
  </ul>
</li>

如果我单击a.dropdown-toggle ，则会打开下拉菜单-正确。 如果我再次单击同一链接，则下拉菜单不会关闭。

有人可以帮我吗？

我在SO或其他任何地方都找不到。

谢谢。

Answer 1

使用此代码。 它会给您想要的结果。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Karriere
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Ausbildung</a></li>
    <li><a href="#">Geselle</a></li>
    <li><a href="#">Meister</a></li>
  </ul>
</div> 

Answer 2

您有data-target="#"阻止其关闭：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <li class="dropdown menu-karriere"> <a class="dropdown-toggle" data-toggle="dropdown" href="asd"> Karriere <b class="caret"></b> </a> <ul class="dropdown-menu" data-lvl="0"> <li class="menu-ausbildung"><a href="asd">Ausbildung</a> </li> <li class="menu-geselle"><a href="asd">Geselle</a> </li> <li class="menu-meister"><a href="asd">Meister</a> </li> </ul> </li>