iPhone上的漢堡按鈕

-1

我通過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 Kyro

你能發佈一段代碼嗎？ – 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

按照此順序將確保您的下拉菜單按預期工作。

希望這會有所幫助！ :)

來源

2017-08-01 22:48:42

感謝您的幫助黑曜石！我碰巧讓他們按正確的順序，但他們都被設置爲異步，所以我認爲它搞砸了。我解決了這個問題，而且我會讓我的朋友明天再次檢查以確認。 – Kyro

太棒了;樂意效勞！一旦你確認這個解決方案解決了你的問題，請不要忘了點擊表決下方的灰色檢查來[**接受這個答案**]（https://stackoverflow.com/help/someone-answers）按鈕 - 這會將其從「未答覆的問題」隊列中移除，併爲問題提問者和問題答疑者授予聲譽。詢問任何問題後，您可以在15分鐘內完成。當然，在說，你沒有義務標記任何答案是正確的，但它確實有助於保持StackOverflow上的事情順利進行:) –

iPhone上的漢堡按鈕

回答

相關問題