引导移动菜单在单击时无法打开

我已经阅读了几个具有相同问题的主题，但这一切都无法解决我的问题，所以我在这里发布这个主题。我的代码在Desktop上运行良好，并且在mobile上也显示menu button，但它在单击它时不会打开菜单。

<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">
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="/css/theme.css" rel="stylesheet" type="text/css" media="all" />
    <link href="/css/themify-icons.css" rel="stylesheet" type="text/css" media="all" />
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600' rel='stylesheet' type='text/css'>
    <!-- In-lining styles to avoid needing a separate .css file -->
    <style>
        hr { border-color: #cccccc; margin: 0; }
        .no-margins { margin: 0px; }
        .with-margins { margin: 10px; }
        .col-centered { float: none; margin: 0 auto; }
    </style>
  </head>
<body>
    <div class="nav-container">
        <a id="top"></a>
        <nav>
            <div class="nav-bar">
                <div class="module left">
                    <a href="/">
                        <img alt="Logo" class="logo logo-dark" src="/img/logo.png">
                    </a>
                </div>
                <div class="module widget-handle mobile-toggle right visible-sm visible-xs">
                    <i class="ti-menu"></i>
                </div>
                <div class="module-group right">
                    <div class="module left">
                        <ul class="menu">
                            <li><a href="/menu1">menu1</a></li>
                            <li><a href="/menu2">menu2</a></li>
                        </ul>
                    </div>
                    <!--end of menu module-->
                    <div class="module widget-handle cart-widget-handle left">
                        <div class="cart">
                            <span>username</span>
                            <i class="ti-user has-dropdown"></i>
                        </div>
                        <div class="function">
                            <div class="widget">
                                <ul class="cart-overview">
                                    <li>
                                        <a href="/profile">
                                            <div class="description">
                                                <span>Profile</span>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/log-out">
                                            <div class="description">
                                                <span>Log out</span>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <!--end of widget-->
                        </div>
                    </div>
                </div>

            <!--end of module group-->
        </div>
    </nav>
</div>
<div id="main-div" class="with-margins">
    <section>
    ...
    </section>
</div>
<footer>
...
</footer>
<link href="/js/jquery.min.js" rel="stylesheet" type="text/css" media="all" />
<link href="/js/bootstrap.min.js" rel="stylesheet" type="text/css" media="all" />
<link href="/js/scripts.js" rel="stylesheet" type="text/css" media="all" />

</body>
</html>

不幸的是，我无法让它在 jsfiddle 中运行，但我稍后会再试一次。非常感谢，如果有人能弄清楚代码可能出了什么问题。

好的，发现了错误。有点愚蠢，但也许有人可能会遇到同样的错误，所以我在这里发布解决方案：

不小心，我使用了与css文件相同的方法来js文件。这就是我所做的，这当然是错误的：

<link href="/js/bootstrap.min.js" rel="stylesheet" type="text/css" media="all" />

这是它应该看起来像的样子：

<script src="/js/bootstrap.min.js"></script>

相关内容

最新更新

热门标签：