Question

我遇到了bootstrap下拉的问题，它在大屏幕尺寸下工作正常，但在移动设备上测试时，它似乎已经展开，重叠以下菜单链接。这是我的导航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

移动视图会更改navebar类。通过在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）链接有一些有用的修复悬停。但对于小型设备，悬停功能不是必需的/功能性的。所以处理。

Bootstrap下拉列表无法在移动设备上运行

1 个答案: