javascript - Mobile Nav 未显示在 Mobile Safari 上

Question

实时站点

https://www.safecolleges.com/

问题

移动导航适用于除 Safari 之外的所有其他设备和浏览器。

描述

我四处寻找了一些修复程序，但似乎没有一个对我有用。我试过让导航按钮放下导航链接 .hamburger { cursor: pointer } 以及它里面的任何元素，只是为了确保。

我尝试使用 JS 强制菜单在单击/点击按钮时显示，方法是访问 style.display 属性并将其更改为 block 单击时。

我什至尝试在按钮本身上做一些肮脏的内联 JS。 onclick="document.querySelector('.mobile-nav').style.display = 'block';" 到目前为止没有任何效果。

奇怪的是，浏览器知道用户何时“点击”汉堡包图标。如果我设置 alert('hello') 然后我会在电话上收到警报。但出于某种原因，导航链接不会显示。有什么解决办法吗？

代码

Twig

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div id="mobilee-codde" class="navbar-header">

// This should be the only area that needs to be messed with
      <button type="button" class="navbar-toggle collapsed hamburger hamburger--slider" data-toggle="collapse" data-target="#primary" aria-expanded="false" onclick="document.querySelector('.mobile-nav').style.display = 'block';">
        <span class="sr-only">Toggle navigation</span>
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
        <span class="menu">MENU</span>
      </button>
// ends here

      <a class="navbar-brand" href="/"><img src="{{logo.url}}" alt="Safe Colleges Logo" /></a>
    </div>

    <div class="collapse navbar-collapse desktop" id="primary">
      <div class="mobile-nav">
        {% include 'partials/mobile-menu.twig' %}
      </div>
      <div id="menu-barr">
            <div class="col-sm-3">
                  <a href="/"><img src="{{logo.url}}" alt="Safe Colleges Logo" /></a>
            </div>
            <div class="col-sm-9" style="padding:0;">
      <ul class="nav navbar-nav">
        {% for item in menu.get_items %}
        <li class="nav-item{% if item.title == 'Our Proven Solutions' or item.title == 'Hot Topics' or item.title == 'Success Stories' %} dropdown{% endif %}" data-target="{{ item.slug }}"><a href="{{ item.get_path }}" class="{{ item.class }} {{ item.current ? 'active' }} nav-link">{{ item.title }}</a>
        </li>
        {% endfor %}
        <li class="nav-item">
          <form role="search" method="get" id="searchform" class="searchform" autocomplete="off" action="/">
            <div>
              <label class="screen-reader-text" for="s">Search for:</label>
              <input type="text" value="" name="s" id="s">
              <input type="image" src="/wp-content/uploads/search-icon-v2.svg" style="position: relative; top: 10px; color: white; height: 22px; width: 22px;" name="search" alt="Search" class="button" />
            </div>
          </form>
        </li>
        <li class="nav-item"><a href="/free-trial/" class="free-trial-link nav-link">Free Trial</a></li>
      </ul>
            </div>
<div class="clear"></div>
      </div>
      <ul class="nav-drop our-proven-solutions-dropdown" bacon-style="equalHeight" bacon-target=".heading, .item">
        {% for product in proven_solutions_dropdown %}
          <li>
            <a href="{{ product.button_link }}"><h4 class="heading">{{ product.heading }}</h4>
            <div class="item">{{ product.copy|wpautop }}</div>
            <span class="btn btn-primary btn-sm" role="button">{{ product.button_copy }}</span></a>
          </li>
        {% endfor %}
      </ul>
      <ul class="nav-drop hot-topics-dropdown">
        <li>
          <a href="/hot-topics/active-shooter-topic"><img src="/assets/images/target.png" alt="" style="margin-left:-7px; margin-right:10px;" /><h4>Active Shooter</h4></a>
        </li>
        <li>
          <a href="/hot-topics/clery-act"><img src="/assets/images/shield.png" alt="" /><h4>Clery Act</h4></a>
        </li>
        <li>
          <a href="/hot-topics/ghs-compliance-training-prevent-campus-accidents/"><img src="/assets/images/flask.png" alt="" /><h4>GHS Compliance</h4></a>
        </li>
        <li>
          <a href="/hot-topics/save-act-training-students"><img src="/assets/images/student.png" alt="" style="margin-left:-5px; margin-right:13px;" /><h4>Save Act</h4></a>
        </li>
        <li>
          <a href="/hot-topics/title-ix-training-faculty"><img src="/assets/images/books.png" alt="" /><h4>Title IX</h4></a>
        </li>
        <li>
          <a href="/hot-topics/vawa"><img src="/assets/images/user.png" alt="" style="margin-right:18px;" /><h4>VAWA</h4></a>
        </li>
      </ul>
      <ul class="nav-drop testimonials-dropdown" style="display: none;">
        <li>
          <a href="/university-of-north-dakota-case-study-2/"><h4>University of North Dakota Case Study</h4></a>
        </li>
        <li>
          <a href="/fairmont-state-meeting-title-ix-mandates-for-staff-students/"><h4>Fairmont State Case Study</h4></a>
        </li>
        <li>
          <a href="/forsyth-tech-case-study/"><h4>Forsyth Tech Case Study</h4></a>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>







{# <header class="page-header container">
  <div class="row">
    <h1 class="brand" role="banner">
      <a href="/" class="logo"><img src="{{logo.url}}" alt="Safe Colleges Logo"></a>
    </h1>
    <button class="hamburger hamburger--slider" data-toggle="collapse" type="button" data-target="#primary" aria-expanded="false">
      <span class="hamburger-box">
        <span class="hamburger-inner"></span>
      </span>
    </button>
    <nav class="navbar primary-navigation container collapse navbar-collapse" id="primary">
      <ul class="nav navbar-nav">
        {% for item in menu.get_items %}
        <li class="nav-item"><a href="{{ item.get_path }}" class="{{ item.class }} {{ item.current ? 'active' }} nav-link">{{ item.title }}</a></li>
        {% endfor %}
        <li class="nav-item">
          <form role="search" method="get" id="searchform" class="searchform" autocomplete="off" action="/">
            <div>
              <label class="screen-reader-text" for="s">Search for:</label>
              <input type="text" value="" name="s" id="s">
              <input type="image" src="/assets/images/magnifying-glass.png" name="search" alt="Search" class="button" />
            </div>
          </form>
        </li>
        <li class="nav-item"><a href="" class="free-trial-link nav-link">Free Trial</a></li>
      </ul>
    </nav>
  </div>
</header> #}

Answer 1

我玩过你的网站，通过从 .navbar-default #primary 类中删除 z-index:0; ，我能够让它在 safari 中工作它似乎仍然适用于 chrome。

这也是有问题的 div

<div class="navbar-collapse desktop collapse in" id="primary" aria-expanded="true" style="">

不确定这是否是最佳解决方案，因为我不确定您是在控制 css 还是在使用库。