出现三个菜单图标而不是一个。 （出现两个不成文的菜单图标 div）

Question

如果您转到https://hcbcke.netlify.app/ 并在浏览器上以智能手机查看模式查看该站点您会注意到出现了三个菜单图标而不是一个。如果您检查菜单图标的元素，您会看到三个 div 看起来像这样 <div class="responsive-menu-icon"></div>

当我看到这个时，我很震惊，因为当你看到我的 HTML 代码时，我只写了一个看起来像这样的 div。

您可以在https://github.com/kimanicharles911/hope_city_bible_church下载所有网站源代码。

源代码不需要任何安装，只需在您的网站上运行 index.html。 div 在 index.html 的第 782 行

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<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>

Answer 1

这是因为按钮是通过 javascript 添加的，在您的情况下，它来自 this script。

它被添加两次的原因是因为您加载了两次 EVERY 脚本。

代码 sn-p 直接来自您的源代码：

<script type="text/javascript" src="https://sovereigngracemusic.org/wp-content/themes/altitude-pro/js/global.js?ver=1.0.0"></script>
<script type="text/javascript" src="js/global.js"></script>

要解决此问题，只需加载每个脚本一次，并从您的 html 中删除 <div class="responsive-menu-icon"></div>，因为它会在页面加载时自动添加。