引导下拉菜单在移动设备中不起作用

Question

我遇到了引导下拉菜单的问题，它在大屏幕尺寸下运行良好，但在移动设备中测试时，它似乎已经展开，与以下菜单链接重叠。这是我用于导航的 html：

<!-- NAVBAR -->

<nav class="navbar-interna">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header" style="width: 100%;">
            <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>
            <div class="row">
                <div class="col-sm" style="float:left;">
                    <a class="navbar-brand" href="index.html"><img src="img/logo.png" data-active-url="img/logo.png" alt="Colegio North Hills" class="img-responsive" ></a>
                </div>
                <div class="col-sm" style="float:right;">
                        <ul class="navbar-sec">
                                <li><a href="https://schoolnet.colegium.com/webapp/">Schoolnet</a></li>
                                <li><a href="http://200.85.120.107:8083/stwa/login.shtml">Schooltrack</a></li>
                        </ul>   
                </div>
            </div>
        </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 navbar-right main-nav">
                <li><a href="index.html">Inicio</a></li>
                <li class="dropdown">
                  <a href="#intro" class="dropdown-toggle" data-toggle="dropdown">El Colegio<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="kinder.html">Kinder</a></li>
                    <li class="divider"></li>
                    <li><a href="primaria.html">Primaria</a></li>
                    <li class="divider"></li>
                    <li><a href="secundaria.html">Secundaria</a></li>
                    <li class="divider"></li>
                    <li><a href="institucional.html">Institucional</a></li>
                    <li class="divider"></li>
                    <li><a href="25-aniversario.html">25 Años</a></li>
                    <li class="divider"></li>
                    <li><a href="valores.html">Valores</a></li>
                    <li class="divider"></li>
                    <li><a href="sustentabilidad.html">Depto. de Sustentabilidad</a></li>
                  </ul>
                </li>
                <li><a href="#proyectos">Proyectos</a></li>
                <li><a href="#sports">Houses & Sports</a></li>
                <li><a href="#arts">Arts</a></li>
                <li><a href="#noticias">Noticias</a></li>
                <li><a href="descargas.html">Descargas</a></li>
                <li><a href="#" data-toggle="modal" data-target="#modal1" class="btn btn-blue">Admisión</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

这里是脚本：

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>

<script>$('ul.nav li.dropdown').hover(function() {
          $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
        }, function() {
          $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
        });
</script>

<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

您可以在此处查看实时站点（测试服务器）：

http://nhtest.esy.es/index.html

怎么了？困扰我太久了，感谢您的帮助！

Answer 1

移动视图更改导航栏类。通过在您的 PC 上将视图/调整浏览器宽度更改为移动大小来尝试自己并检查链接/下拉列表，您可以看到它如何更改类。 这是下拉菜单中第一个链接的选择器路径 -

#bs-example-navbar-collapse-1 > ul > li.dropdown > ul > li:nth-child(1) > a

到

body > div.mobile-nav.active > ul > li.dropdown > ul > li:nth-child(1) > a

希望您理解问题所在。修复您的 jquery 代码以在这两种情况下选择下拉菜单。

此外，此 (How to make Twitter Bootstrap menu dropdown on hover rather than click) 链接对悬停有一些有用的修复。但对于小型设备，悬停功能不是必需的/功能。所以处理那个。