Html 在tab/mobile模式下单击时，我的导航栏下拉列表将缩小

引导版本：3.3.5

我使用了W3学校的引导导航条形码的默认代码。现在，我将代码用于我正在创建的页面，但每当我通过调整浏览器大小切换到移动/选项卡模式时，下拉子菜单将显示，整个菜单将在之后收缩

问题是，gif上的第1页下拉按钮将不会显示其子菜单-相反，整个菜单将收缩。它应该显示它的子菜单（第1-1页，第1-2页，第1-3页）

请检查我创建的gif。

我试过同样的代码，效果非常好。“第1页”下拉列表将显示其子菜单，并且整个菜单不会收缩。检查下面的小提琴。

我猜我的代码中有冲突，但我已经删除并注释掉了所有可能导致这种行为的原因。有人能解释发生了什么事吗

看看这里，它正在工作

大多数情况下，这是因为

jQuery

没有正确链接到页面。或者在

jQuery.js

之前引用

bootstrap.js

。确保这些链接正确。

看看这里，它现在可以工作了

---

大多数情况下，这是因为

jQuery

没有正确链接到页面。或者在

jQuery.js

之前引用

bootstrap.js

。确保链接正确。

如果没有完整的代码，我很难测试此解决方案，但请尝试不要在下拉锚上设置href=“#”

相反，请尝试以下方法：

HTML

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button> <a class="navbar-brand" href="#">WebSiteName</a>

        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a>

                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="cursor:pointer;">Page 1 <span class="caret"></span></a>

                    <ul class="dropdown-menu">
                        <li><a href="#page1-1">Page 1-1</a>
                        </li>
                        <li><a href="#page1-2">Page 1-2</a>
                        </li>
                        <li><a href="#page1-3">Page 1-3</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#page2">Page 2</a>

                </li>
                <li><a href="#page3">Page 3</a>

                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a>

                </li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a>

                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="examplePage" id="page1-1">
    PAGE 1-1
</div>
<div class="examplePage" id="page1-2">
    PAGE 1-2
</div>
<div class="examplePage" id="page1-3">
    PAGE 1-3
</div>

<div class="examplePage" id="page2">
    PAGE 2
</div>

<div class="examplePage" id="page3">
    PAGE 3
</div>

---

如果没有完整的代码，我很难测试此解决方案，但请尝试不要在下拉锚上设置href=“#”

相反，请尝试以下方法：

HTML

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button> <a class="navbar-brand" href="#">WebSiteName</a>

        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a>

                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="cursor:pointer;">Page 1 <span class="caret"></span></a>

                    <ul class="dropdown-menu">
                        <li><a href="#page1-1">Page 1-1</a>
                        </li>
                        <li><a href="#page1-2">Page 1-2</a>
                        </li>
                        <li><a href="#page1-3">Page 1-3</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#page2">Page 2</a>

                </li>
                <li><a href="#page3">Page 3</a>

                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a>

                </li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a>

                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="examplePage" id="page1-1">
    PAGE 1-1
</div>
<div class="examplePage" id="page1-2">
    PAGE 1-2
</div>
<div class="examplePage" id="page1-3">
    PAGE 1-3
</div>

<div class="examplePage" id="page2">
    PAGE 2
</div>

<div class="examplePage" id="page3">
    PAGE 3
</div>

---

请发布一个完整的代码示例（HTML/CSS/JS）。我被这个问题弄糊涂了，它就像它在手机上引导时的样子掉了下来。有什么问题？它不是指向正确的页面吗？@PX5我可以知道您使用的是哪个版本的引导css吗？？？请发布一个完整的代码示例（HTML/css/JS）。我被这个问题弄糊涂了，它就像它在手机上引导时的样子掉了下来。有什么问题？它不是指向正确的页面吗？@PX5我可以知道您使用的是哪个版本的引导css吗？？？没有外部css，因为我曾经删除了所有css代码以测试其行为。该设计是纯引导式的。我想知道这种行为背后的原因是什么，因为当我在fiddle上试用时，这些代码实际上工作得很好。但是当我在我的页面上尝试它时，它的行为很奇怪，我不知道为什么。没有外部css，因为我曾经删除了所有css代码来测试它的行为。该设计是纯引导式的。我想知道这种行为背后的原因是什么，因为当我在fiddle上试用时，这些代码实际上工作得很好。但当我在我的网页上尝试它时，它表现得很奇怪，我不知道为什么。