html - 切换菜单在移动设备中不起作用

Question

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

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

请检查以下用于导航栏标题菜单的 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>

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

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