javascript Bootstrap 切换菜单在页面加载时展开

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26152393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 05:34:57  来源:igfitidea点击:

Bootstrap toggle menu expand on page load

javascriptjquerytwitter-bootstrap-3navbar

提问by smmf

I have a navbar with dropdowns that work perfectly with hover. But on smartphones, instead of tapping to open the dropdown, I want it to open automatically as soon as the toggle menu button is tapped.

我有一个带有下拉菜单的导航栏,可以与悬停完美配合。但是在智能手机上,我希望它在点击切换菜单按钮后立即自动打开,而不是点击打开下拉菜单。

I've tried some snippets I've found around here but haven't managed to adapt any to my problem.

我已经尝试了一些我在这里找到的片段,但没有设法适应我的问题。

回答by jme11

Just manually add the class "in" to the element with the collapse navbar-collapse classes in your markup.

只需在标记中使用折叠导航栏折叠类手动将类“in”添加到元素中。

<nav class="collapse navbar-collapse in" role="navigation">

From the Bootstrap documentation on the Collapseplugin:

来自Collapse插件的 Bootstrap 文档:

Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

确保将类折叠添加到可折叠元素。如果您希望它默认打开,请添加额外的类。

EDIT:

编辑:

Sorry, I misread the question. Here is a DEMO.

对不起,我误读了这个问题。这是一个演示

To open the submenus, @scooterlord is correct, but the trick is that you need to use the right event. If you try and add the open class to the elements with the dropdown class on the click event of the toggle, it won't work because the dropdowns are closed automatically when the navbar is toggled. So, you'll have to wait until the collapse is fully shown:

要打开子菜单,@scooterlord 是正确的,但诀窍是您需要使用正确的事件。如果您尝试在切换的单击事件上将打开的类添加到具有下拉类的元素中,它将不起作用,因为在切换导航栏时下拉列表会自动关闭。因此,您必须等到完全显示崩溃:

$('.collapse.navbar-collapse').on('shown.bs.collapse', function(){
    $('.dropdown').addClass('open');
});