切换菜单在移动设备中不起作用答案

【问题标题】：Toggle menu is not working in the mobile device切换菜单在移动设备中不起作用
【发布时间】：2015-01-22 08:15:30
【问题描述】：

我的网站切换菜单在移动设备上不起作用。我们使用的是 bootstrap v3.2.0 版本。第一次单击切换菜单有效，但第二次无效。

请给我这个问题的正确解决方案。请检查下面的代码，让我知道问题发生在哪里。网站已经开发成 Angular js，这里有些东西会与 js 冲突或可能导致由于引导版本或任何原因导致的问题。

请仔细阅读以下用于导航栏标题菜单的 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>

可能是切换或折叠菜单请帮我解决切换导航菜单。

【问题讨论】：

你能发布你的代码吗？根据点击被取消的类，您可能隐藏了可以取消切换的元素。
请检查上面更新的代码并帮助解决它。
这是一个小提琴。请更新它以证明您的问题。 jsfiddle.net/isherwood/3qgazqwt

标签： html css twitter-bootstrap-3 togglebutton

【解决方案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 -->

【讨论】：