时间戳

首页 > 解决方案 > 在 Bootstrap 框架中未打开可折叠菜单

javascript - 在 Bootstrap 框架中未打开可折叠菜单

问题描述

我是第一次编码，几乎一无所知。我正在尝试在线学习 html、css 和 js。我正在尝试创建一个响应式站点，其中导航栏菜单以较小的分辨率折叠。到目前为止，当我单击菜单图标时，它会以白色突出显示，但不会展开以显示项目。

我正在使用 bootstrap 3.3.6 和 jquery 2.1.4（我知道它很旧，但我正在学习的课程正在使用这些）

提前致谢！！（PS：忽略内容，名称等，我只是想让自己有趣）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gorilla Sports</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style_ch.css">
    <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;1,500&display=swap" rel="stylesheet">


</head>
<body>
    <header> 

        <nav id="header-nav" class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="index.html" class="pull-left visible-md visible-lg" >
                        <div id="logo-img" ></div>
                    </a>

                    <div class="navbar-brand">
                        <a href="index.html"><h1>Gorilla Sports</h1></a>
                        <p>
                            <img src="Images/gorilla_small.jpg" alt="Gorilla">
                            <span>Gorilla</span>
                        </p>
                    </div>

                    <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#collapsable-nav"
                    aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <div id="collapsable-nav" class="collapse navbar-collapse">
                    <ul id="nav-list" class="nav navbar-nav navbar-right">
                        <li>
                            <a href="menu-categories.html">
                                <span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu</a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs"> About</a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="glyphicon glyphicon-certificate"></span><br class="hidden-xs"> Awards</a>
                        </li>
                        <li id="phone" class="hidden-xs">
                            <a href="tel:+91-9910673649">
                                <span>+91-9910673649</span></a><div>* We Deliver</div>
                        </li>
                    </ul>
                </div>
            </div>


        </nav>
    </header>



    <script type="text/javascript" src="jquery-2.1.4.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

标签： javascripthtmltwitter-bootstrap

解决方案

https://jsfiddle.net/fjg1c5bk/您的折叠菜单正在运行。也许您的引导库不正确。你能用下面的方法改变它们然后再试一次吗

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

推荐阅读