Question

我通过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();
});

Answer 1

问题在于您引用jQuery或Bootstrap插件的方式。请记住，Bootstrap有一个负责触发下拉列表的第二个.js文件，这个JavaScript文件将jQuery作为依赖项。由于它是依赖，因此必须在之前引用 Bootstrap JavaScript文件。

请查看以下工作示例中的<head>部分：

＆＃13;

<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>

＆＃13;

请注意<head>：

的顺序

的jQuery
Bootstrap JavaScript
Bootstrap CSS

遵循此订单将确保您的下拉列表按预期工作。

希望这有帮助！：）

iPhone上的汉堡按钮

1 个答案: