jquery 数据切换折叠不起作用

sr4lhrrt 于 2022-11-29 发布在 jQuery

关注(0)|答案(2)|浏览(168)

我想隐藏我的导航栏，并在我点击按钮时显示它。为此，我使用了数据切换。
我是从一个模板工作，我想这就是为什么它不工作...
下面是我的代码：

<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

来源：https://stackoverflow.com/questions/37963853/data-toggle-collapse-doesnt-work

2条答案

按热度按时间

l0oc07j21#

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

赞(0）回复(0）举报 2022-11-29

oipij1gg2#

请在您的问题中突出显示不起作用的内容？检查您是否意外地将相同的ID分配给其他块并期望在此处进行更改。
我认为您应该从id id=“navbar-collapse-02”的div中删除“navbar-collapse”
请参阅：http://getbootstrap.com/javascript/#collapse

赞(0）回复(0）举报 2022-11-29

我来回答

jquery 数据切换折叠不起作用

2条答案

相关问题

热门标签

最新问答