汉堡导航不可点击 - 已检查脚本和 CDN

Posted

技术标签:

【中文标题】汉堡导航不可点击 - 已检查脚本和 CDN【英文标题】:Hamburger nav not clickable - already checked scripts and CDN 【发布时间】:2019-10-20 09:30:30 【问题描述】:

我整晚都在和这个作斗争。我试图为我的网站的移动版本实现一个简单的汉堡菜单。不知何故,它不可点击!它只是不会扩大。

没有控制台日志错误,我尝试了以下方法:

移动了我所有的脚本文件 - 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>

请帮忙!我需要这个东西启动并运行,但不知何故它不起作用

【问题讨论】:

我修好了!我的样式表有冲突... 【参考方案1】:

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

【讨论】:

以上是关于汉堡导航不可点击 - 已检查脚本和 CDN的主要内容,如果未能解决你的问题,请参考以下文章

如何在点击 tags?关闭汉堡包导航

点击事件后关闭汉堡菜单

在较大屏幕尺寸下消失导航

SPDY CDN + 异步脚本加载后端

导航菜单到汉堡菜单

如何更改Android中的汉堡包图标(导航抽屉)