【问题标题】:Hamburger button on iphoneiphone上的汉堡按钮
【发布时间】:2018-01-08 23:02:08
【问题描述】:

我通过 webhost inmotionhosting 通过 node.js/bootstrap 创建了自己的站点。我有我的网站,汉堡按钮在我的安卓(S5)上工作,我正在工作告诉别人我的教练业务......他们用他们的 iPhone 访问了我的网站,汉堡按钮不起作用?不知道是哪个iphone我的假设是它是一部 iphone 4,因为我看到其他人在使用该手机时遇到了这个问题,但所有这些帖子都是在 wordpress 和其他此类网站上发布的……所以我有点迷路了。任何帮助将非常感激。网站是 www.HealthGainsCoaching.com - 代码是...

 <body>
        <nav id="topNav" class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                         </button>

                        <a class="navbar-brand" href="/">Health Gains Coaching</a>
                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li><a id="headerLogoSpacer"><span class="sr-only"></span></a></li>

                            <li><a href="/about">About</a></li>

                            <li><a href="/contact">Contact</a></li>

                            <li><a href="/scheduleasession">Schedule a Session</a></li>

                            <li class="dropdown">
                                <button class="btn services-css dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    Services
                                    <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
                                </button>

                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    <li><a href="/14daycleanse">14 Day Cleanse</a></li>

                                    <li><a href="/privatecoaching">Private Coaching</a></li>

                                    <li><a href="/groupcoaching">Group Coaching</a></li>

                                    <!--<li role="separator" class="divider"></li>-->

                                    <!--<li><a href="/affiliates">Affiliates</a></li>-->
                                </ul>
                            </li>

                            <!--<li><a href="/store">Store</a></li>-->

                            <!--<li><a href="/successstories">Success Stories</a></li>-->

                        </ul>
                          <!--CODE FOR HIDING LOGIN/LOGOUT BUTTONS WHEN LOGGED IN IS BROKE ATM (FROM YELP C9)-->

                        <!--<ul class="nav navbar-nav navbar-right">-->
                        <!--    <li><a href="/login"><i class="topNav fa fa-user" aria-hidden="true"></i> Login</a></li>-->

                        <!--    <li><a href="/register"><i class="topNav fa fa-user-plus" aria-hidden="true"></i> Sign Up</a></li>-->

                        <!--    <li><a href="/logout"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a></li>-->
                        <!--</ul>-->
                    </div>
                </div>
            </nav>

jquery...

$
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous" async></script>

$('.sectors').click(function() {
  event.preventDefault();
  $('#dropdown').toggle();
});

【问题讨论】:

  • 能发个sn-p代码吗?

标签: jquery iphone node.js twitter-bootstrap hamburger-menu


【解决方案1】:

问题在于您引用 jQuery 或 Bootstrap 插件的方式。请记住,Bootstrap 有第二个 .js 文件负责触发下拉菜单,并且此 JavaScript 文件具有 jQuery 作为依赖项。因为它是一个依赖项,所以必须在 Bootstrap JavaScript 文件之前引用它。

查看以下工作示例中的 &lt;head&gt; 部分:

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <nav id="topNav" class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Health Gains Coaching</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a id="headerLogoSpacer"><span class="sr-only"></span></a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
          <li><a href="/scheduleasession">Schedule a Session</a></li>
          <li class="dropdown">
            <button class="btn services-css dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              Services
              <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li><a href="/14daycleanse">14 Day Cleanse</a></li>
              <li><a href="/privatecoaching">Private Coaching</a></li>
              <li><a href="/groupcoaching">Group Coaching</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

注意&lt;head&gt;的顺序:

  1. jQuery
  2. 引导 JavaScript
  3. 引导 CSS

遵循此顺序将确保您的下拉菜单按预期工作。

希望这会有所帮助! :)

【讨论】:

  • 感谢黑曜石的帮助!我碰巧让它们按正确的顺序排列,但它们都设置为异步,所以我认为这搞砸了。我已经解决了这个问题,明天我会让我的朋友再次检查以仔细检查。
  • 太棒了;乐意效劳!一旦您确认此解决方案可以解决您的问题,请不要忘记点击投票按钮下方的灰色复选标记 accept this answer - 这会将其从“未回答的问题”队列中删除,并为这两个问题授予声誉提问者和问题回答者。在提出任何问题后 15 分钟,您就可以做到这一点。当然,这么说,你没有义务将任何答案标记为正确,尽管它确实有助于保持 StackOverflow 上的事情顺利进行:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-11-16
  • 2023-01-26
  • 1970-01-01
  • 1970-01-01
  • 2015-11-24
相关资源
最近更新 更多