2014-11-24 44 views
0

我的網站切換菜單在移動設備中不起作用。我們使用引導v3.2.0版本。第一次點擊切換菜單正在工作,但第二次不工作。切換菜單在移動設備中不起作用

請給我這個問題的正確解決方案。請檢查下面的代碼,並讓我知道問題發生在哪裏。該網站已發展成角js,這裏是與js衝突或可能是導致由於引導版本或任何引起的問題。

請仔細閱讀以下用於navbar-header菜單的html代碼,並讓我知道問題出在哪裏。

<div class="col-md-11"> 
    <div class="navbar-header" style="cursor:pointer;"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <!-- <button type="button" class="navbar-toggle collapsed dropdown-toggle" data-target=".navbar-collapse" data-toggle="collapse">--> 
     <!--class="navbar-toggle" data-target=".navbar-collapse"--> 
     <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
    </div> 

    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav nav-justified"> 
      <li class="phocl"> <a title="WATCH NOW" href="#portfolio"> 
       <div class="text-center hmain_menu" style="padding-bottom: 14px; padding-top: 15px;"> WATCH NOW </div> 
       </a> 
      </li> 
      <li class="phocl1"> <a title="INSPIRATION NATION" href="#services"> 
       <div class="text-center hmain_menu" style="padding-bottom: 14px; padding-top: 15px;"> INSPIRATION NATION </div> 
       </a> 
      </li> 
      <li class="phocl2"> <a title="NEWS" href="#news"> 
       <div class="text-center hmain_menu" style="padding-bottom: 14px; padding-top: 15px;"> NEWS </div> 
       </a> 
      </li> 
      <li class="phocl3"> <a id="addBookmark" title="BOOKMARK" href="#team"> 
       <!--id="bookmarkme" rel="sidebar" --> 
       <div class="text-center hmain_menu" style="padding-bottom: 14px; padding-top: 15px;"> BOOKMARK </div> 
       </a> 
      </li> 
      <li> <a href="#"> 
       <div class="send_button" data-toggle="modal" data-target="#largeModal" class="text-center" style="background-color:#50d07d;padding-bottom: 14px; padding-top: 30px;"> 
       SIGN IN 
       </div> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 

可能是切換或摺疊菜單,請幫我解決切換導航菜單。

+0

您可以發佈您的代碼?根據點擊的類別,您可能隱藏了可以取消切換的元素。 – Arthur 2014-11-24 15:06:07

+0

請仔細閱讀上面提到的問題,並幫助解決問題。 – webseo 2014-11-24 15:24:35

+0

這是一個小提琴。請更新它來演示你的問題。 http://jsfiddle.net/isherwood/3qgazqwt/ – isherwood 2014-11-24 15:28:59

回答

1

試試這個版本

<!--- NAVIGATION --> 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <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="index.html"><img src="images/merimen-logo.png" class="img-responsive logo"></a> 
    </div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav nav-justified"> 
     <li class="phocl text-center"> <a title="WATCH NOW" href="#portfolio">WATCH NOW</a></li> 
     <li class="phocl1"><a title="INSPIRATION NATION" href="#services">INSPIRATION NATION</li> 
     <li class="phocl2"><a title="NEWS" href="#news">NEWS</li> 
     <li class="phocl3"><a id="addBookmark" title="BOOKMARK" href="#team">BOOKMARK</li> 
     <li><a href="#"> 
      <div class="send_button" data-toggle="modal" data-target="#largeModal" class="text-center" style="background-color:#50d07d;padding-bottom: 14px; padding-top: 30px;">SIGN IN</div> 
      </a> 
     </li> 
    </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
<!--- NAVIGATION -->