Bootstrap 3：移动导航在桌面上打开，但不是在 iPhone 上？

Question

我为几个朋友创建了一个网站，并且即将完成：

http://hopetherapy.info

挑战： 当我单击移动导航汉堡菜单时，它会在 Mac 上的 FireFox、Safari、Chrome 的桌面上打开（使窗口变窄以进行测试）。不过，在 iPhone 6 OS 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 上打开的任何想法？

Answer 1

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

Answer 2

似乎有一个控制台错误可能会影响 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()

对此：

    jQuery(document).ready(function($)

这应该会清除错误，然后检查导航是否正常工作。