单击相同链接关闭引导程序下拉列表

时间:2017-01-10 12:15:58

标签: javascript jquery html twitter-bootstrap dropdown

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

感谢。

2 个答案:

答案 0 :(得分: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> 

答案 1 :(得分:0)

你有data-target="#"阻止它关闭:

&#13;
&#13;
<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>
&#13;
&#13;
&#13;