html - 导航栏折叠按钮仅展开(Bootstrap)

Question

我已经看过很多关于此类问题的主题，但从来没有看过这个:折叠时，我可以点击按钮展开链接列表，这很酷，但是当我想再次单击以关闭它时在它上面，它不起作用并且保持打开状态。

此外，我还关注了数据目标之类的东西

这是我的按钮:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle Navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

这是我折叠的导航栏:

<div class="collapse navbar-collapse" id="app-navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
    <li>
        <a href="/">doc</a>
    </li>
    <li>
        <a href="/">about</a>
    </li>
    </ul>
</div>

谢谢你的帮助

Answer 1

检查了你的 Bootstrap 版本如果不是最新版本那么请尝试将你的版本更改为最新版本然后再次检查，

还要检查您的 jquery 版本。应该是最新的，避免冲突。

我已经用最新版本的 Bootstrap 检查了你的代码，它工作正常。

谢谢。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle Navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
  <ul class="nav navbar-nav navbar-right">
    <li>
      <a href="/">doc</a>
    </li>
    <li>
      <a href="/">about</a>
    </li>
  </ul>
</div>