수퍼 피시 메뉴, 첫 번째 요소에만 마술 라인 스틱 필요

Question

수퍼 피쉬와 마술 라인을 사용하여 건물 내비게이션.

JSFIDDLE : 마법 라인의http://jsfiddle.net/gz7tx0rh/

폭이과 같이 부모의 폭을 기준으로 계산됩니다

$(document).ready(function() { 

      $("#example").append("<li id='magic-line'></li>"); 

      /* Cache it */ 
      var $magicLine = $("#magic-line"); 

      $magicLine 
       .width($(".current_page_item").width()) 
       .css("left", $(".current_page_item a").position().left) 
       .data("origLeft", $magicLine.position().left) 
       .data("origWidth", $magicLine.width()); 

      $("#example li").find("a").hover(function() { 
       $el = $(this); 
       orPos = $("#example").offset().left; 
       leftPos = $el.offset().left-orPos; 
       newWidth = $el.parent().width(); 

       $magicLine.stop().animate({ 
        left: leftPos, 
        width: newWidth 
       }); 
      }, function() { 
       $magicLine.stop().animate({ 
        left: $magicLine.data("origLeft"), 
        width: $magicLine.data("origWidth") 
       });  
      }); 


      var example = $('#example').superfish({ 
        //add options here if required 
      }); 
    }); 

그것은 링크의 첫 번째 수준 괜찮 작동합니다. 그러나 링크의 두 번째 레벨 위로 마우스를 가져 가면 마술 선이 새로운 너비로 확장됩니다. 나는 그것을 원하지 않는다. 난 그냥 너비가 첫 번째 수준 (부모) 만 필요합니다. 제대로에 대한 반대 투표에 대한

Answer 1

감사는 질문을했다. 어쨌든 해결책을 찾았습니다. a 요소를 측정하는 대신 li 요소 (첫 번째 수준 만)로 전환했습니다. 코드 :

$(document).ready(function() { 

      $("#example").append("<li id='magic-line'></li>"); 

      /* Cache it */ 
      var $magicLine = $("#magic-line"); 

      $magicLine 
       .width($(".current_page_item").width()) 
       .css("left", $(".current_page_item a").position().left) 
       .data("origLeft", $magicLine.position().left) 
       .data("origWidth", $magicLine.width()); 

      $("#example > li").hover(function() { 
       $el = $(this); 
       orPos = $("#example").offset().left; 
       leftPos = $el.offset().left-orPos; 
       newWidth = $el.width(); 

       $magicLine.stop().animate({ 
        left: leftPos, 
        width: newWidth 
       }); 
      }, function() { 
       $magicLine.stop().animate({ 
        left: $magicLine.data("origLeft"), 
        width: $magicLine.data("origWidth") 
       });  
      }); 


      var example = $('#example').superfish({ 
        //add options here if required 
      }); 
    });