时间戳

首页 > 解决方案 > 手机媒体点击导航栏无响应

javascript - 手机媒体点击导航栏无响应

问题描述

嘿，开发人员，您能帮我解决这个阻止我完成这个网站的问题吗？有人在其浏览器的智能手机视图中查看https://hcbcke.netlify.app/并帮助我解决为什么单击时响应式菜单图标没有响应。您可以在https://github.com/kimanicharles911/hope_city_bible_church下载源代码。下面是 HTML 代码。 网站图片

<nav class="nav-primary" aria-label="Main">
            <div class="wrap">
              <div class="responsive-menu-icon"></div>
              <ul id="menu-main-menu" class="menu genesis-nav-menu menu-primary responsive-menu">
                <li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-103 current_page_item menu-item-116">
                  <a href="#" aria-current="page"><span>Home</span></a>
                </li>
                <li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115">
                  <a href="#"><span>About</span></a>
                </li>
                <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112">
                  <a href="#"><span>Music</span></a>
                </li>
                <li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111">
                  <a href="#"><span>Training</span></a>
                </li>
                <li id="menu-item-9230" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9230">
                  <a href="#"><span>Blog</span></a>
                </li>
                <li id="menu-item-3048" class="menu-item menu-item-type-custom menu-item-object-custom social-icon facebook menu-item-3048">
                  <a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/hcbcke/">
                    <span>
                      <i class="icon-2x icon-facebook"></i>
                      <span class="fa-hidden">Facebook</span>
                    </span>
                  </a>
                </li>
                <li id="menu-item-3049" class="menu-item menu-item-type-custom menu-item-object-custom social-icon twitter menu-item-3049">
                  <a target="_blank" rel="noopener noreferrer" href="#">
                    <span>
                      <i class="icon-2x icon-twitter"></i>
                      <span class="fa-hidden">Twitter</span>
                    </span>
                  </a>
                </li>
                <li id="menu-item-3050" class="menu-item menu-item-type-custom menu-item-object-custom social-icon youtube menu-item-3050">
                  <a target="_blank" rel="noopener noreferrer" href="#">
                    <span>
                      <i class="icon-2x icon-youtube"></i>
                      <span class="fa-hidden">YouTube</span>
                    </span>
                  </a>
                </li>
                <li id="menu-item-6279" class="menu-item menu-item-type-custom menu-item-object-custom social-icon instagram menu-item-6279">
                  <a target="_blank" rel="noopener noreferrer" href="#">
                    <span>
                      <i class="icon-2x icon-instagram"></i>
                      <span class="fa-hidden">Instagram</span>
                    </span>
                  </a>
                </li>
                <li id="menu-item-8331" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8331">
                  <a target="_blank" rel="noopener noreferrer" href="#">
                    <span>
                      <i class="fab fa-spotify icon-2x"></i>
                    </span>
                  </a>
                </li>
                <li id="menu-item-8332" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8332">
                  <a target="_blank" rel="noopener noreferrer" href="#">
                    <span>
                      <i class="fab fa-apple icon-2x"></i>
                    </span>
                  </a>
                </li>
                <li id="menu-item-5105" class="bop-nav-search menu-item menu-item-type-search menu-item-object- menu-item-5105">
                  <form class="bop-nav-search menu-item menu-item-type-search menu-item-object- menu-item-5105" role="search" method="get" action="#">
                    <label>
                      <span class="screen-reader-text">Search</span>
                      <input type="search" class="search-field" placeholder value name="s" title>
                    </label>
                    <input type="submit" class="search-submit" value="Search">
                  </form>
                </li>
              </ul>
            </div>
          </nav>

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

解决方案

js 文件与 jQuery 文件可能存在一些冲突。确保在 bootstrap js 脚本之前包含最新的 jQuery 脚本。您必须按这样的顺序包含脚本-

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

如果 jQuery 稍后出现，则 javaScript 函数将无法工作。

推荐阅读