Javascript Twitter引导程序顶部菜单未知组件向下滑动_Javascript_Html_Css_Twitter Bootstrap

Javascript Twitter引导程序顶部菜单未知组件向下滑动

javascript html css twitter-bootstrap

Javascript Twitter引导程序顶部菜单未知组件向下滑动,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我正在使用Twitter引导，但我的顶部栏菜单有问题。当我从下拉列表中选择一个项目时，所有事件都被正确触发，JavaScript是可以的，但是有一个可视化的东西（adiv可能？）向下滑动然后消失。看起来是这样的：我不是推特引导专家，但我想我已经有一些无效的HTML放在那里。此处提供了完整的HTML代码：，但最重要的部分可能是： <body>  <nav class="navbar navbar-defau

我正在使用Twitter引导，但我的顶部栏菜单有问题。当我从下拉列表中选择一个项目时，所有事件都被正确触发，JavaScript是可以的，但是有一个可视化的东西（a

div

可能？）向下滑动然后消失。看起来是这样的：

我不是推特引导专家，但我想我已经有一些无效的HTML放在那里。此处提供了完整的HTML代码：，但最重要的部分可能是：

<body>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            [...]
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Samples <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li class="dropdown-header">faker.js</li>
                            <li><a href="#" id="example_faker" data-toggle="collapse" data-target=".navbar-collapse">faker example</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header">chance.js</li>
                            <li><a href="#" id="example_chance" data-toggle="collapse" data-target=".navbar-collapse">chance example</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header">other</li>
                            <li><a href="#" id="example_boolean" data-toggle="collapse" data-target=".navbar-collapse">boolean</a></li>
                            <li><a href="#" id="example_integer" data-toggle="collapse" data-target=".navbar-collapse">integer</a></li>
                            <li><a href="#" id="example_array" data-toggle="collapse" data-target=".navbar-collapse">array</a></li>
                        </ul>
                    </li>


[...]



faker.js


chance.js


其他

Twitter引导版本是v3.3.4（来自bower.json）
此页面的代码保存在此处：
该网站可在线访问：。试着点击顶部栏菜单中的“样本”，然后选择任何选项，看到这个奇怪的东西滑下来，然后消失

问题是：我能做些什么来消除“滑落和消失的东西”bug

编辑

此应用程序也支持移动版本。看起来是这样的：

当您触摸右上角的导航按钮时，菜单出现：

现在，当我单击“采样”时，将显示子菜单：

当我单击任何选项时，我希望所有菜单都隐藏（折叠），以便立即看到演示

现在手机可以正常工作了：）。我希望非移动滑动bug解决方案不会破坏移动版本。


<div id="navbar" class="navbar-collapse collapse">

删除2个css类

这两个类应该与下拉系统一起工作。因此，下拉系统尝试对这个div执行一些奇怪的操作，但它实际上不起作用。

删除2个css类

这两个类应该与下拉系统一起工作。因此，下拉系统试图对这个div执行一些奇怪的操作，但它实际上不起作用。

引导菜单不是设计成这样的。也可以将其作为移动设备进行查看和预览

一个简单的解决方法是让JS进行隐藏，如：

<a href="#" onclick="hideNavbarMenu()" id="example_chance">chance example</a>

请注意，我还从链接中删除了

data toggle=“collapse”data target=“.navbar collapse”

。

引导菜单的设计不是这样的。也可以将其作为移动设备进行查看和预览

一个简单的解决方法是让JS进行隐藏，如：

<a href="#" onclick="hideNavbarMenu()" id="example_chance">chance example</a>

请注意，我还从链接中删除了

data toggle=“collapse”data target=“.navbar collapse”

。

您的解决方案解决了滑动问题，但它完全阻止了页面的移动版本。我使用Google Chrome来模拟移动视口-查看它在删除这些类时崩溃。您的解决方案解决了滑动问题，但它完全阻止了页面的移动版本。我使用Google Chrome来模拟移动视口——看看它在删除这些类后是否崩溃。我用移动版本的图像扩展了这个问题。不幸的是，您的解决方案破坏了移动设备：选择任何一个示例选项都不会在移动设备中隐藏整个菜单（而且应该如此）。也许有一个java解决方案可以解决这个问题…？@tkoomzaaskz更新答案。JS也摆脱了动画boostrap（我个人很讨厌），因为它没有使用“navbar collapse-collapsing”类作为中间类。我用移动版本的图像扩展了这个问题。不幸的是，您的解决方案破坏了移动设备：选择任何一个示例选项都不会在移动设备中隐藏整个菜单（而且应该如此）。也许有一个java解决方案可以解决这个问题…？@tkoomzaaskz更新答案。JS也摆脱了动画boostrap（我个人讨厌），因为它没有使用“navbar collapse-collapsing”类作为中间类。