我创建了一个简单的响应式菜单 - 这是一个精简版本: JsFiddle Here
HTML
<a href="javascript:void(0);" onclick="toggleNav()">
<span class="ico"><i class="fa fa-bars hvr-icon"></i></span> Dashboard
</a><ul id="submenu">
<li>Example Menu</li>
<li>Example Menu 2</li>
<li>Example Menu 3</li>
</ul>
JavaScript
function toggleNav() {
$("#submenu").toggle();
}
CSS
#submenu {
display:none;
}
我使用 jQuery 来切换()显示。
如果我切换子菜单
来显示,当使用媒体查询增加屏幕尺寸时,我想再次响应式地隐藏它(例如,不单击切换按钮),例如:
@media screen and (max-width: 991px) {
但是,任何 CSS 样式都会被toggle() 写入的内联样式覆盖。
有人可以建议一种实现这一目标的方法吗?
谢谢。
最佳答案
您可以随时使用toggleClass
,而不是使用toggle
。通过切换一个类,您可以将该类添加到各种媒体查询中,并根据需要设置样式。
.active{dispaly:block;}
function toggleNav() {
$("#submenu").toggleClass("active");
}
@media screen and (max-width: 991px) {
#submenu.active{
display:none !important;
}
}
您可能需要也可能不需要!重要
关于html - 使用 jQuery toggle() 后如何响应式地隐藏菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63711339/