这里我做了一个我的菜单jsfiddle的例子.所以我有水平菜单下拉,但我需要的是 – 在页面加载第一李应该扩展(这不难)当我悬停在任何其他元素上它应该显示当前扩展的内容(如果i mouseleave当前元素应该扩展).
这是当我将鼠标悬停在Item2和mouseleave Item2时,它应该保持这样：
Item1 Item2 Item3
|||||
subItem2.1 subItem2.2 subItem2.3
更新：
它按照我想要的方式工作,但是当我点击链接Item1或Item2时,调用init()函数,并且Item1再次激活,我需要以某种方式设置活动链接 – 单击一个,
例如,如果我点击了Item3链接,它会将我重定向到Item3页面,并且此链接在菜单中处于活动状态.
(Jsfiddle上的所有代码)
最佳答案
如果我正确理解你的问题,问题是你需要调用init函数来重绘所有,但同时你将item1设置为current;如果您刚刚按下link2,这就不行了.
如果认为你的解决方案应该几乎删除所有的init代码.所有这些都可以在css样式中完成,简化了很多代码.
你将活动设置为项目. (你已经在锚中做了这个,在li中做).然后,将所有外观样式放在css中,并减少脚本.
不需要在子项目上设置活动.你可以设置像li.active li这样的规则;也就是说,li是活跃li的后代.
完成所有这些后,您可以完全避免使用init函数.
添加小提琴
我在更新的fiddle中更改了它
我正在将可见项目菜单标记为“当前”,我发现“主动”让类名混淆.它必须在li而不在,因此它可以影响第二级lis
现在剧本就是
$(document).ready(function() {
$("#menu_item ul.menu li.expanded").mouSEOver(function(){
var prevIoUs = $('.current');
prevIoUs.removeClass('current');
$(this).addClass('current');
});
});
我只是从前一个当前元素中删除当前元素,并将其添加到新元素中.
初始选择仅在标记中
