引导3:手机导航可以在桌面打开，但不能在iPhone上打开

Bootstrap 3: Mobile nav opens on desktop, but not on iPhone?

本文关键字：但不能 iPhone 桌面 导航 引导 手机      更新时间：2023-09-26

我为几个朋友创建了一个网站，现在快完成了:

http://hopetherapy.info

挑战:当我点击移动导航汉堡包菜单时，它会在Mac上的FireFox、Safari和Chrome的桌面上打开(为了测试，把窗口弄得很窄)。在iPhone 6操作系统10.1.1上，选择汉堡包菜单没有任何动作(尚未在Android上测试)。

我确实重新安排了这个设计的菜单是右对齐的，并与另一个WordPress主题合并，这可能会导致一些问题，我还没有看到。

结果菜单HTML:

<header id="nav">
  <div class="navbar navbar-inverse navbar-fixed-top" data-spy="affix" data-offset-top="10">
    <div class="container">
      <a href="#" class="navbar-brand"><img alt="Hope Heals Counseling" src="/wp-content/themes/bootstrap-hope-heals/img/hope-heals-counseling2.png"></a>
      <a class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="navbar-collapse collapse">
        <ul id="menu-main-menu" class="nav pull-right navbar-nav"><li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-27 active active"><a href="http://hopetherapy.info/">Home</a></li>
          <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://hopetherapy.info/answers/">Answers</a></li>
          <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://hopetherapy.info/blog/">Blog</a></li>
          <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://hopetherapy.info/contact/">Contact</a></li>
          <li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a href="tel:16164227787">Call: +1.616.422.7787</a></li>
        </ul> 
      </div>  
    </div>
  </div>
</header>

有什么想法可能导致汉堡菜单不打开iPhone吗?

有人已经为我回答了这个问题，在一次新的搜索后发现。我错过了汉堡菜单上的href="#"

看起来有一个控制台错误可能会影响javascript。下面是生成错误的代码:

    jQuery(document).ready(function() {
     //scroll to next section on home page
    $("#goscroll").click(function(e) { 
     var offset = 50;
     e.preventDefault(); 
     var dest = $("#services");
       $('html,body').animate({ scrollTop: window.innerHeight - offset }, 2500); 
      });
});

错误提示$未定义。要定义$更改这一行

    jQuery(document).ready(function()

To this: 

    jQuery(document).ready(function($)

这应该清除错误，然后检查，看看是否导航工作之后。

相关文章：