Question

我正在使用Twitter Bootstrap，而且我对顶栏菜单有疑问。当我从下拉列表中选择一个项目时，所有事件都被正确触发，JavaScript是可以的，但是有一个可视化的东西（可能是div？）向下滑动然后消失。它看起来像这样：

ugly sliding-down bug image

我不是Twitter Bootstrap专家，但我希望我在那里得到一些无效的HTML。整个HTML代码可在此处获取：https://github.com/pateketrueke/json-schema-faker/blob/gh-pages/src/index.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>

Twitter Bootstrap版本是v3.3.4（来自bower.json）。
此页面的代码保存在此处：https://github.com/pateketrueke/json-schema-faker/tree/gh-pages。
该网站可在线获取：http://json-schema-faker.js.org/。尝试点击＆＃34;样本＆＃34;在顶栏菜单中，然后选择任何选项，看到这个奇怪的东西向下滑动然后消失......

问题是：我该怎样做才能删除＆＃34;滑落和消失的东西＆＃34;错误？

修改的

此应用也支持移动版。它看起来像这样：

mobile version mainpage image

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

mobile version mainmenu image

现在，当我点击样本时，会出现子菜单：

mobile version samples submenu image

当我点击任何选项时，我希望所有菜单都隐藏（折叠），只是为了立即查看演示。

现在移动设备正常工作:)。而且我喜欢非移动滑动的bug解决方案，而不是打破移动版本。

Answer 1

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

删除2个css类。

这两个类应该适用于下拉系统。因此，下拉系统试图用这个div做一些奇怪的事情并且它确实不起作用。

Answer 2

Bootstrap菜单的设计不是这样的。请查看http://getbootstrap.com/javascript/#dropdowns并将其预览为移动设备。

您想要做的一个简单的解决方法是让JS进行隐藏，例如：

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

和JS：

function hideNavbarMenu() {
  $('.navbar-collapse').removeClass('in');
}

请注意，我还从链接中删除了data-toggle="collapse" data-target=".navbar-collapse"。

Twitter Bootstrap顶级菜单未知组件向下滑动

2 个答案: