iPhone上的汉堡按钮

问题描述：

我通过webhost inmotionhosting通过node.js/bootstrap创建了自己的站点。我有我的网站和汉堡按钮在我的android（S5）上工作，我在工作中告诉某人我的教练业务...他们去我的网站在他们的iphone和汉堡按钮不工作？我不知道它是哪个iphone。我的假设是它是一个iPhone 4，因为我看到其他人在使用该手机时遇到了这个问题，但所有这些帖子都是用wordpress和其他类似的网站..所以我有点失落。任何帮助将非常感激。网站是www.HealthGainsCoaching.com - 代码...iPhone上的汉堡按钮

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

你能发布一段代码吗？ – 2017-08-01 22:31:29

答

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

看看在<head>部分在下面的工作例如：

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

注意<head>的顺序：

jQuery的

引导的JavaScript

Bootstrap CSS

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

希望这会有所帮助！ :)

感谢您的帮助黑曜石！我碰巧让他们按正确的顺序，但他们都被设置为异步，所以我认为它搞砸了。我解决了这个问题，而且我会让我的朋友明天再次检查以确认。 – Kyro

太棒了;乐意效劳！一旦你确认这个解决方案解决了你的问题，请不要忘了点击表决下方的灰色检查来[**接受这个答案**]（https://stackoverflow.com/help/someone-answers）按钮 - 这会将其从“未答复的问题”队列中移除，并为问题提问者和问题答疑者授予声誉。询问任何问题后，您可以在15分钟内完成。当然，在说，你没有义务标记任何答案是正确的，但它确实有助于保持StackOverflow上的事情顺利进行:) –

iPhone上的汉堡按钮

相关推荐