响应式菜单和jQuery的slideToggle问题
我正在构建一个响应式导航菜单，我在调用jQuery的slideToggle（）时无法使导航项变得可见。 菜单项（.nav_item）适当折叠，然后在视口<640px时变为不可见，第一个菜单项（#nav_menu）“菜单”则成为唯一可见的项目。 单击后，我希望按钮重新出现并在菜单按钮下滑动。 但是，当我点击时，没有任何反应，菜单项仍然不可见。 如果我拿出display: none !important; 从菜单项中，他们成功切换（但一直可见）。 有谁知道出了什么问题？ 谢谢。
CSS（指南针）：
#navUL { @include background-image(linear-gradient($blue_dark, $blue_light)); text-align: center; } #navUL li { a:link, a:visited { color: white; text-decoration: none; display: block; height: 40px; padding: 0 25px 0 25px; } a:hover { @include background-image(linear-gradient($red_dark, $red_light)); } display: inline-block; color: white; line-height: 40px; font-family: Helvetica; } #nav_menu { display: none !important; } @media only screen and (max-width: 640px) { #nav_menu { display: inline !important; } .nav_item { display: none !important; } #navUL li { display: inline; } }
HTML：
JS：
$(document).ready(function(){ $('#nav_menu').on('click', function(e){ e.preventDefault(); $('.nav_item').slideToggle('slow'); }); });
这基本上只是一个特殊问题 。
尽管jQuery的.slideToggle()方法添加了内联样式，但当屏幕大小小于.slideToggle()它仍然没有效果，因为你使用了!important 。
@media only screen and (max-width: 640px) .nav_item { display: none !important; } }
更具体地说，媒体查询中的上述样式覆盖了jQuery添加的样式：
Home
要解决此问题，请在样式表中删除!important所有实例，并在考虑特殊性问题时重新构建样式。 如果我是你，我会避免像这样使用id 。 简单的课程就足够了，有助于避免这样的未来问题。 但是，如果不改变任何HTML，这将有效：
#navUL #nav_menu { display: none; } @media only screen and (max-width: 640px) { #navUL #nav_menu { display: inline-block; } #navUL .nav_item { display: none; } }
由于您已经在使用jQuery，因此当屏幕大小超过640px时，请使用resize事件来删除jQuery样式。
$(window).on("resize", function () { if ($(window).width() > 640) { $('.nav_item').css('display',''); } }).resize();
这应该照顾一切。 看看这个工作示例 。