2017-05-08 146 views
0

我已经看到很多有关这类问题的主题,但从来没有看到过这样的主题:折叠时,我可以点击按钮来展开链接列表,这很酷,但是当我想通过再次点击关闭它,它不起作用,它仍然是开放的。导航栏折叠按钮只能展开(引导)

而且,我关注的东西像数据目标和东西

这里是我的按钮:

<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> 

谢谢您帮助

+1

它的工作find..check这样的:https://jsfiddle.net/tanp7wg7/ –

+0

您的代码似乎工作,[这里](https://jsfiddle.net/ 3hv9fgqw /)JSFiddle。 –

+0

他错过了一些脚本,包括我猜 –

回答

0

检查您的Bootstrap版本如果它不是最新的,请尝试t o更改您的版本到最新,然后再次检查,

而且还检查您的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>