bootstrap响应式导航栏点击collapse的按钮没有反应,不会向下展开

发布于 2022-08-30 16:29:20 字数 1078 浏览 8 评论 0

<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="../" class="navbar-brand">社区</a>
        </div>
        <div class="navbar-collapse navbar-ex1-collapse collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li class=""><a href="">论坛</a></li>
                <li class=""><a href="">博客</a></li>
            </ul>
        </div>
    </div>
</nav>

代码如上,已经导入bootstrap.css和bootstrap.js文件

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

困倦 2022-09-06 16:29:20

楼上说的对,可以看下bootstap文档,http://v3.bootcss.com/components/#navbarhttp://v3.bootcss.com/javascript/#collapse

Enable manually with:

$('.collapse').collapse()
雄赳赳气昂昂 2022-09-06 16:29:20

jQuery的引入应该要在bootstrap.min.js之前,因为bootstrap的js依赖于jquery.jquery的版本不能太低。

图片描述

若言繁花未落 2022-09-06 16:29:20

少了Js调用啊

$('.collapse').collapse()
一城柳絮吹成雪 2022-09-06 16:29:20

楼主你好。之前回答了一次,不知道因为我自己给删了还是因为楼主也删了,居然给扣了5分声望。。好伤心。。。
我本地测试了下。首先,如果button使用navbar-toggle修饰的话,好像只有窗口足够小的时候才能出现button。
其次,对于手风琴效果,我的建议不使用data-toggle="collapse"而是通过JS来进行控制。将你的代码修改后如下,仅供参考,我也项目有需要,才刚刚学习的前端。
sf贴代码有点问题,只能换成截图。

图片描述

心清如水 2022-09-06 16:29:20

你的JQuery版本太老了,换成2.1.1版本就OK了

想你只要分分秒秒 2022-09-06 16:29:20

楼主你的问题解决了没有 我也遇到这个问题了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文