Question

我整夜都在为此而战。我正在尝试为我的网站的移动版本实现一个简单的汉堡菜单。莫名其妙地不可点击！它只会扩大。

没有控制台日志错误，我已经尝试了以下操作：

在我所有的脚本文件中移动 -jquery，bootstrap和js的顺序 -将它们放在头部而不是页脚

已检查的CDN -我的意思是，我确实有一个系统范围的addblocker。但是我已经将代码发布到qtopia.hallometmaxz.nl上了，并且在我的手机或平板电脑上也无法正常工作

更改了类的ID，甚至试图在CSS中放入z-index 9999！

<head>

    <link href="assets/fonts/font-awesome.css" rel="stylesheet" type="text/css">
    <link href="assets/fonts/elegant-fonts.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css" type="text/css">
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">

    <script  src="assets/js/jquery-2.2.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>
<div class="page-wrapper">
    <header>



<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
        <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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 class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="navigation animate">
                <li><a href="" data-toggle="modal" data-target="#modal-over-ons">Over Ons</a></li>
                <li><a href="" data-toggle="modal" data-target="#modal-gallery">Foto's</a></li>
                <li><a href="https://www.qtopiaqueerartsfestival.nl/vacatures/" target="_blank">Vacatures</a></li>
                <li><a href="https://www.qtopiaqueerartsfestival.nl/" target="_blank">editie 2018</a></li>
                <li><a href="" data-toggle="modal" data-target="#modal-contact">Contact</a></li>
            </ul></div>
            <!--end navigation-->
  </div>
</nav>
    </header>

&&&

<script  src="assets/js/jquery.validate.min.js"></script>
<script  src="assets/js/jquery.magnific-popup.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>
<script  src="assets/js/exploding-triangles.js"></script>
<script  src="assets/js/custom.js"></script>
</body>

请帮助！我需要将其启动并运行，以某种方式无法正常工作

Answer 1

如果愿意，可以参考以下链接。这可能会帮助您制作一个汉堡图标。.https://www.w3schools.com/howto/howto_js_mobile_navbar.asp

汉堡导航无法点击-已检查脚本和CDN

1 个答案: