这个JS我在菜单上面创建了一个面包屑。 它还可以激活隐藏的菜单。
- > http://jsfiddle.net/4XTPR/9/
- >较新版本:http://jsfiddle.net/4XTPR/26/
$('#menu a').on('click', function() {
var $this = $(this),
$bc = $('<div class="item"></div>');
$this.parents('li').each(function(n, li) {
var $a = $(li).children('a').clone().prepend(' > ');
$bc.prepend($a);
/*animate Menu*/
$(li).children('.sub-menu').animate({
opacity: 1,
left: "10"
}, 200, function() {
// Animation complete.
});
/*End animate Menu*/
});
$('.breadcrumb').html( $bc.prepend('<a href="#home">Home</a>') );
return false;
})
如何让面包屑与我的菜单互动?我想在鼠标上打开(动画回)相关的菜单图层(并在鼠标移出时恢复它),但我找不到解决方案。
修改
添加了课程和数据:
<a href="#" data-depth="1">ParentXY</a>
<ul class="sub-menu 1" >...
目前的解决方案:
var activedepth = "0";
$('#menu a').on('click', function() {
var $this = $(this);
$bc = $('<div class="item"></div>');
var activedepth = $(this).data('depth');
$this.parents('li').each(function(n, li) {
var $a = $(li).children('a').clone().prepend(' > ');
$bc.prepend($a);
/*animate Menu*/
$(li).children('.sub-menu').animate({
opacity: 1,
left: "10"
}, 200, function() {
// Animation complete.
});
/*End animate Menu*/
});
$('.breadcrumb').html( $bc.prepend('<a href="#" data-depth="0">Home</a>') );
/*Mouseover Actions*/
$('.item a').on('mouseenter', function() {
var depthwert = $(this).data('depth');
for (var i = activedepth; i > depthwert; i--){
$('#nav .'+i).stop().animate({left:"295"},200);
}
});
$('.item a').on('mouseout', function() {
var depthwert = $(this).data('depth');
for (var f = 0; f <= activedepth; f++){
$('#nav .'+f).stop().animate({left:"10"},200);
}
});
return false;
});