2011-09-05 13 views
7

miałem szybkiego przeglądania wokół sieci dla realizacji Superfish menu Joel Birch, który działa na onclick zamiast zawisu.Jak mogę otworzyć menu jQuery Superfish na kliknięcie zamiast najechania kursorem?

Znaleziony link Karl Swedberg na Github, która wygląda jak bilecie.

https://gist.github.com/917446

To działa jak czar, aż do momentu, gdy klikam na aktywnym linkiem, w tym punkcie menu zamyka, i wydaje się, return false.

Jak mogę zmusić go, aby przejść do rzeczywistego miejsca przeznaczenia łącza?

+0

Paul, proszę przyjąć odpowiedź, aby rozwiązać ten post. – isherwood

Odpowiedz

4

Zmiana tej linii (linia 21, nad funkcji):

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

do tego:

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

Pełny kod przyborów do kliknięcia menu:

/* 
* 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 napisali szybką aktualizację, aby mi pomóc na GitHub .. tutaj: https://gist.github.com/652684 że nie bardzo działa na mnie.

Grab mojego kodu pracy z linku poniżej.

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

zaktualizowane .. tylko okrywać linkujące kiedykolwiek umiera ..

/* 
* 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

Zastanawiasz się, dlaczego linia 'location.href = this.href' jest potrzebna, staram się, aby działała bez niej bez powodzenia. To znaczy, dlaczego jest tracone działanie deault znacznika ? Czy mógłbyś wyjaśnić? – arod

+0

location.href = bieżące okno. this.href = tag href. – Paul