在jquery中定位元素 – 没有向上/向下滑动
jquery的新手。 希望显示/隐藏水平菜单栏项。 我已经尝试了几次迭代但没有成功。
CSS正在工作和样式化,并且javascript在onload事件中将li
和a
标记类设置为“活动”。 我错过了什么? 我总结错误是在jquery中,虽然它不能简单得多。 解释很有帮助。 我很感激使用现有html的建议。
div id = menu的主要目的是启用条形中心。
我的剧本
编辑1
$(document).ready(function() { $('#nav li').hover(function() { //show its submenu $('ul', this).slideDown(100); }, function() { //hide its submenu $('ul', this).slideUp(100); }); });
我的Html
您现有的代码似乎工作正常,请参阅DEMO
编辑
根据您的反馈,我做了一些更多的研究,我发现你的CSS干扰了动画。
如果您查看上面链接的原始演示,其中没有样式,您会看到向下滑动/向上按照指定的100毫秒。
如果你用CSS查看你的DEMO ,你会看到菜单出现。
经过一番试验和错误后,我确定了导致这种情况的CSS。 如果从CSS中删除以下部分,则子菜单的动画将按预期再次运行。
/* Make the sub menus appear on hover */ #menu ul li:hover ul, #menu ul li.hover ul { /* This line is required for IE 6 and below */ display:block; /* Show the sub menus */ }
上面的CSS从下滑/上下滑动方法覆盖动画,只是将子菜单显示为块。 它仍然有效,如果您保留IE6修复,但您必须删除#menu ul li:hover ul
的CSS #menu ul li:hover ul
:
/* Make the sub menus appear on hover */ #menu ul li.hover ul { /* This line is required for IE 6 and below */ display:block; /* Show the sub menus */ }
我将这些变化应用于小提琴,它现在正在运作。
见DEMO