2011-09-05 3 views
7

Joel Birch가 Superfish 메뉴를 구현 한 웹을 둘러 보았습니다.이 메뉴는 마우스를 가리기보다는 onclick에서 작동합니다.어떻게 캡쳐 할 때 Superfish jQuery Menu를 열 수 있습니까?

티켓과 같이 보이는 Github의 Karl Swedberg가이 링크를 찾았습니다.

https://gist.github.com/917446

그것은 메뉴가 닫힙니다 그 시점에서, 바로 내가 활성 링크를 클릭 지점까지, 마치 마법처럼 작동하고, false를 돌려 나타납니다.

실제 링크 대상으로 이동하려면 어떻게해야합니까?

+0

Paul, 답을 수락하여 게시물을 해결하십시오. – isherwood

답변

4

(기능 이상 라인 21)이 라인 변경 : 이것에

$$.showSuperfishUl().siblings().hideSuperfishUl(); 

:

$$.click(function(){$(this).showSuperfishUl().siblings().hideSuperfishUl();}); 

메뉴를 클릭하기위한 전체 수퍼 코드 :

/* 
* Superfish v1.4.8 - jQuery menu widget 
* Copyright (c) 2008 Joel Birch 
* 
* Dual licensed under the MIT and GPL licenses: 
* http://www.opensource.org/licenses/mit-license.php 
* http://www.gnu.org/licenses/gpl.html 
* 
* CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt 
*/ 

;(function($){ 
    $.fn.superfish = function(op){ 

     var sf = $.fn.superfish, 
      c = sf.c, 
      $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')), 
      over = function(){ 
       var $$ = $(this), menu = getMenu($$); 
       clearTimeout(menu.sfTimer); 
       $$.click(function(){$(this).showSuperfishUl().siblings().hideSuperfishUl();}); 
      }, 
      out = function(){ 
       var $$ = $(this), menu = getMenu($$), o = sf.op; 
       clearTimeout(menu.sfTimer); 
       menu.sfTimer=setTimeout(function(){ 
        o.retainPath=($.inArray($$[0],o.$path)>-1); 
        $$.hideSuperfishUl(); 
        if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);} 
       },o.delay); 
      }, 
      getMenu = function($menu){ 
       var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0]; 
       sf.op = sf.o[menu.serial]; 
       return menu; 
      }, 
      addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); }; 

     return this.each(function() { 
      var s = this.serial = sf.o.length; 
      var o = $.extend({},sf.defaults,op); 
      o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){ 
       $(this).addClass([o.hoverClass,c.bcClass].join(' ')) 
        .filter('li:has(ul)').removeClass(o.pathClass); 
      }); 
      sf.o[s] = sf.op = o; 

      $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() { 
       if (o.autoArrows) addArrow($('>a:first-child',this)); 
      }) 
      .not('.'+c.bcClass) 
       .hideSuperfishUl(); 

      var $a = $('a',this); 
      $a.each(function(i){ 
       var $li = $a.eq(i).parents('li'); 
       $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);}); 
      }); 
      o.onInit.call(this); 

     }).each(function() { 
      var menuClasses = [c.menuClass]; 
      if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass); 
      $(this).addClass(menuClasses.join(' ')); 
     }); 
    }; 

    var sf = $.fn.superfish; 
    sf.o = []; 
    sf.op = {}; 
    sf.IE7fix = function(){ 
     var o = sf.op; 
     if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined) 
      this.toggleClass(sf.c.shadowClass+'-off'); 
     }; 
    sf.c = { 
     bcClass  : 'sf-breadcrumb', 
     menuClass : 'sf-js-enabled', 
     anchorClass : 'sf-with-ul', 
     arrowClass : 'sf-sub-indicator', 
     shadowClass : 'sf-shadow' 
    }; 
    sf.defaults = { 
     hoverClass : 'sfHover', 
     pathClass : 'overideThisToUse', 
     pathLevels : 1, 
     delay  : 200, 
     animation : {opacity:'show'}, 
     speed  : 'fast', 
     autoArrows : true, 
     dropShadows : true, 
     disableHI : false,  // true disables hoverIntent detection 
     onInit  : function(){}, // callback functions 
     onBeforeShow: function(){}, 
     onShow  : function(){}, 
     onHide  : function(){} 
    }; 
    $.fn.extend({ 
     hideSuperfishUl : function(){ 
      var o = sf.op, 
       not = (o.retainPath===true) ? o.$path : ''; 
      o.retainPath = false; 
      var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass) 
        .find('>ul').hide().css('visibility','hidden'); 
      o.onHide.call($ul); 
      return this; 
     }, 
     showSuperfishUl : function(){ 
      var o = sf.op, 
       sh = sf.c.shadowClass+'-off', 
       $ul = this.addClass(o.hoverClass) 
        .find('>ul:hidden').css('visibility','visible'); 
      sf.IE7fix.call($ul); 
      o.onBeforeShow.call($ul); 
      $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); }); 
      return this; 
     } 
    }); 

})(jQuery); 
7

Karl이 GitHub ..에서 나를 도와주는 빠른 업데이트를 게시했습니다. 여기는 https://gist.github.com/652684으로 나를 위해 잘 작동하지 않았습니다.

아래 링크에서 작업 코드를 가져옵니다.

http://www.nilinks.com/home-owner/wp-content/themes/acheson/js/superfish.js

업데이트 .. 링크가 지금까지 사망 단지 까봐 ..

/* 
* Superfish v1.4.8 - jQuery menu widget 
* Copyright (c) 2008 Joel Birch 
* 
* Dual licensed under the MIT and GPL licenses: 
* http://www.opensource.org/licenses/mit-license.php 
* http://www.gnu.org/licenses/gpl.html 
* 
* CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt 
*/ 

;(function($){ 
    $.fn.superfish = function(op){ 

     var sf = $.fn.superfish, 
      c = sf.c, 
      $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')), 
      over = function(){ 
       var $this = $(this), menu = getMenu($this); 
       clearTimeout(menu.sfTimer); 
       $this.showSuperfishUl().siblings().hideSuperfishUl(); 
      }, 
      out = function(){ 
       var $this = $(this), menu = getMenu($this), o = sf.op; 
       clearTimeout(menu.sfTimer); 
       menu.sfTimer=setTimeout(function(){ 
        o.retainPath=($.inArray($this[0],o.$path)>-1); 
        $this.hideSuperfishUl(); 
        if (o.$path.length && $this.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);} 
       },o.delay); 
      }, 
      getMenu = function($menu){ 
       var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0]; 
       sf.op = sf.o[menu.serial]; 
       return menu; 
      }, 
      addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); }; 

     return this.each(function() { 
      var $this = $(this); 
      var s = this.serial = sf.o.length; 
      var o = $.extend({},sf.defaults,op); 
      o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){ 
       $(this).addClass([o.hoverClass,c.bcClass].join(' ')) 
        .filter('li:has(ul)').removeClass(o.pathClass); 
      }); 
      sf.o[s] = sf.op = o; 
     // CHANGED: by KARL SWEDBERG 
      if ((o.eventType === 'hoverIntent' && !$.fn.hoverIntent) || !(/^(?:hover|hoverIntent|toggle)$/).test(o.eventType)) { 
       o.eventType = 'hover'; 
      } 
      $this.find('li:has(ul)')[o.eventType](over,out).each(function() { 
       if (o.autoArrows) { 
        addArrow($('>a:first-child',this)); 
       // this.addClass("yourClass"); 
       } 
      }) 
      .not('.'+c.bcClass) 
       .hideSuperfishUl(); 


      $this.find('a').each(function(i){ 
       var $a = $(this), $li = $a.parents('li'); 
       $a.focus(function(){over.call($li);}).blur(function(){out.call($li);}); 
       $a.click(function(event) { 
        event.preventDefault(); 
        if (!$a.hasClass("sf-with-ul")) { 
        location.href = this.href; 
        } 
       }); 
      }); 
      o.onInit.call(this); 

     }).each(function() { 
      var menuClasses = [c.menuClass]; 
      if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) { 
       menuClasses.push(c.shadowClass); 
      } 
      $(this).addClass(menuClasses.join(' ')); 
     }); 
    }; 

    var sf = $.fn.superfish; 
    sf.o = []; 
    sf.op = {}; 
    sf.IE7fix = function(){ 
     var o = sf.op; 
     if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined) { 
      this.toggleClass(sf.c.shadowClass+'-off'); 
     } 
     }; 
    sf.c = { 
     bcClass  : 'sf-breadcrumb', 
     menuClass : 'sf-js-enabled', 
     anchorClass : 'sf-with-ul', 
     arrowClass : 'sf-sub-indicator', 
     shadowClass : 'sf-shadow' 
    }; 
    sf.defaults = { 
     hoverClass : 'sfHover', 
     pathClass : 'overideThisToUse', 
     pathLevels : 1, 
     delay  : 800, 
     animation : {opacity:'show'},  
     speed  : 'normal', 
     closeAnimation: {opacity: 'hide'}, 
     closeSpeed: 0, 
     autoArrows : true, 
     dropShadows : true, 
    // CHANGED: by KARL SWEDBERG 
     eventType : 'toggle', // one of 'toggle', 'hover', or 'hoverIntent' 
    // disableHI : false, // true disables hoverIntent detection 
     onInit  : function(){}, // callback functions 
     onBeforeShow: function(){}, 
     onShow  : function(){}, 
     onHide  : function(){} 
    }; 
    $.fn.extend({ 
     hideSuperfishUl : function(){ 
      var o = sf.op, 
       not = (o.retainPath===true) ? o.$path : ''; 
      o.retainPath = false; 
      var $closingLi = $(['li.',o.hoverClass].join(''),this).add(this).not(not); 
      var $ul = $closingLi 
        .find('>ul'); 
      $ul.animate(o.closeAnimation, o.closeSpeed, function() { 
       $closingLi.removeClass(o.hoverClass); 
     $ul.css('visibility','hidden'); 
     }); 
      o.onHide.call($ul); 
      return this; 
     }, 
     showSuperfishUl : function(){ 
      var o = sf.op, 
       sh = sf.c.shadowClass+'-off', 
       $ul = this.addClass(o.hoverClass) 
        .find('>ul:hidden').css('visibility','visible'); 
      sf.IE7fix.call($ul); 
      o.onBeforeShow.call($ul); 
      $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); }); 
      return this; 
     } 
    }); 

})(jQuery); 
+0

그냥'location.href = this.href'라는 줄이 왜 필요한지 궁금합니다. 운이없는 곳에서 작동 시키려고합니다. 즉, 태그의 작동 불능 행위가 왜 사라지나요? 설명해 주시겠습니까? – arod

+0

location.href = 현재 창. this.href = 태그 href. – Paul

관련 문제