Bootstrap切换菜单在页面加载时扩展 [英] Bootstrap toggle menu expand on page load

问题描述

我有一个带有下拉菜单的导航栏，可以很好地与悬停一起使用.但是，在智能手机上，我希望点击一下切换菜单按钮后就可以自动打开，而不是点击以打开下拉菜单.

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.

推荐答案

只需将标记中带有折叠navbar-collapse类的元素中的"in"类手动添加到元素中即可.

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

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

从折叠插件上的Bootstrap文档中:

From the Bootstrap documentation on the Collapse plugin:

确保将类折叠添加到可折叠元素中.如果您希望它默认打开，请在其中添加其他类.

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

对不起，我没有看清楚问题.这是 DEMO .

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

要打开子菜单，@ scooterlord是正确的，但是窍门是您需要使用正确的事件.如果您尝试在切换的click事件上将open类添加到具有dropdown类的元素中，则它将无法正常工作，因为在切换导航栏时，下拉列表会自动关闭.因此，您必须等到完全显示折叠后为止:

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:

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

这篇关于Bootstrap切换菜单在页面加载时扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！