数据切换折叠不起作用答案

【问题标题】：data-toggle collapse doesn't work数据切换折叠不起作用
【发布时间】：2016-06-22 17:45:12
【问题描述】：

我想隐藏我的导航栏并在我单击按钮时显示它。为此，我使用数据切换。

我正在使用模板，我认为这就是它不起作用的原因......

这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Lato|Source+Sans+Pro' rel='stylesheet' type='text/css'>

<!-- Latest JQuery -->
<!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="navbar-header">
     <!-- Hamburger navigation -->
     <button data-target="#navbar-collapse-02" data-toggle="collapse" class="navbar-toggle" type="button">
         <i class="glyphicon glyphicon-menu-hamburger"></i>
     </button>
</div>

<div id="navbar-collapse-02" class="collapse navbar-collapse">
     <ul class="nav navbar-nav navbar-right">
         <li class="active propClone" id="accueil">Accueil</li>
         <li class="propClone" id="aPropos">A propos</li>
         <li class="propClone" id="devis">Devis</li>
         <li class="propClone" id="contact">Contact</li>
     </ul>
</div>  <!-- /.navbar-collapse -->

【问题讨论】：

您是否在控制台中遇到任何错误？
仅来自 Jquery API 的错误（2 个错误）
你能给我们看看吗？我认为您在导入 jQuery 时可能会遇到问题...
— simple-timeline.jquery.js:69 TypeError: undefined is not an object (evalating 'firstDate[0].slice') and Error: Syntax error, unrecognized expression: [href=#undefined ] 在 jquery.min.js:2:12788

标签： javascript jquery collapse

【解决方案1】：

从 div 中删除类 navbar-collapse。只需collapse in 类就可以做到这一点。同时从button 中删除类class="navbar-toggle"。

<button data-target="#navbar-collapse-02" data-toggle="collapse" type="button">
         <i class="glyphicon glyphicon-menu-hamburger"></i>
     </button>

<div id="navbar-collapse-02" class="collapse in">
     <ul class="nav navbar-nav navbar-right">
         <li class="active propClone" id="accueil">Accueil</li>
         <li class="propClone" id="aPropos">A propos</li>
         <li class="propClone" id="devis">Devis</li>
         <li class="propClone" id="contact">Contact</li>
     </ul>
</div>

【讨论】：

我复制/粘贴你的代码，实际上我的导航栏是可见的，但汉堡按钮是不活动的..所以导航栏总是可见的，我不明白为什么^^我正在努力
点击按钮看看会发生什么？
页面只是滚动了一点
控制台中没有其他内容，但为什么导航栏默认可见？我写了 aria-hidden"false" !!
在本地下载引导文件并从本地机器使用，而不是在线参考。

【解决方案2】：

请在您的问题中强调什么不起作用？检查您是否没有不小心将相同的 id 分配给其他块并期待此处的更改。

我认为您应该从 id id="navbar-collapse-02" 的 div 中删除“navbar-collapse”

参考： http://getbootstrap.com/javascript/#collapse

【讨论】：

我没有相同的 id。我做了豹子告诉我的事情^^