2011-09-05 11 views
7

Ho fatto una rapida ricerca sul web per un'implementazione del menu Superfish di Joel Birch che funziona su onclick, piuttosto che su hover.Come posso aprire un menu jQuery Superfish su clic anziché su passaggio del mouse?

Trovato questo collegamento da Karl Swedberg a Github, che assomiglia al biglietto.

https://gist.github.com/917446

Esso funziona come un fascino, fino al punto in cui si fa clic su un link attivo, a quel punto il menu si chiude, e sembra restituire false.

Come è possibile ottenerlo per raggiungere la destinazione effettiva del collegamento?

+0

Paul, si prega di accettare la risposta per risolvere il post. – isherwood

risposta

4

La modifica di questa linea (linea 21, sopra la funzione):

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

A tal:

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

Codice superfish completo per fare clic sul 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 ha pubblicato un aggiornamento rapido per aiutarmi su GitHub .. qui: https://gist.github.com/652684 che non ha funzionato abbastanza per me.

Prendere il codice di lavoro dal collegamento seguente.

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

aggiornato .. solo in caso che puntano muore mai ..

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

Mi chiedo solo perché la riga 'location.href = this.href' sia necessaria, sto cercando di farcela funzionare senza di essa. Vale a dire, perché viene persa l'azione di deazione del tag ? Potresti spiegare per favore? – arod

+0

location.href = finestra corrente. this.href = un tag href. – Paul

Problemi correlati