2014-11-24 47 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 -->