如何在移动设备上打开引导下拉菜单项 [英] How to keep bootstrap drop down menu items open on mobile

问题描述

大家好，



我正在使用bootstrap框架构建一个网站，我一直坚持如何在我的导航中保持下拉菜单默认打开我在移动设备上查看该网站，即屏幕分辨率为480px。



基本上我想要实现的是，如果在移动设备上查看网站，一旦用户点击导航切换按钮并打开导航项，打开下拉列表并让它保持打开状态。



这是我第一次使用bootstrap，因为我主要是一个后端开发人员（PHP / MySql，C＃。 NET）



谢谢

Hi guys,

I am building a website using the bootstrap framework and I am stuck with how to keep the drop down menus in my navigation open by default when I view the site in mobile i.e screen resolution of 480px.

Basically what I want to achieve is, if the site is viewed on a mobile device, once the user clicks the navigation toggle button and the navigation item opens, make the drop down list open too and let it stay open.

This is my first time using bootstrap as I am mainly a back-end developer (PHP/MySql , C#.NET)

Thanks

推荐答案

使用javascript将hover类添加到菜单项。< br $>


当前CSS：

Use javascript to add "hover" class to your menu item.

Current CSS:

.showDropDownMenu {
    display: inline-block;
}

新CSS：

New CSS:

.showDropDownMenu, showDropDownMenuHoverEffect{
    display: inline-block;
}

单击导航按钮时，使用javascript来浏览菜单并将悬停类（showDropDownMenuHoverEffect）添加到要显示的菜单中。再次单击导航按钮时，使用javascript删除悬停类。

When the nav button is clicked use javascript to walk your menu and add the "hover class (showDropDownMenuHoverEffect)" to the menus you want to display. When the nav button is clicked again use javascript to remove the "hover" class.

这篇关于如何在移动设备上打开引导下拉菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！