单击相同的链接关闭引导下拉菜单答案

【问题标题】：Close bootstrap dropdown on click same link单击相同的链接关闭引导下拉菜单
【发布时间】：2017-01-10 12:15:57
【问题描述】：

我有一个 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 或其他任何地方都找不到东西。

谢谢。

【问题讨论】：

如果我删除数据目标，它将按需要工作。这让您感到困扰吗？

标签： javascript jquery html twitter-bootstrap dropdown

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：