用面包屑打开UL

时间:2014-06-25 10:03:00

标签: jquery html css menu breadcrumbs

这个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;
    });

0 个答案:

没有答案