2011-09-05 41 views
7

Tôi đã có một trình duyệt nhanh chóng trên web để thực hiện trình đơn Superfish của Joel Birch hoạt động trên onclick, thay vì di chuột.Làm cách nào để mở Trình đơn jQuery Superfish khi nhấp chuột thay vì di chuột?

Tìm liên kết này bởi Karl Swedberg tại Github, trông giống như vé.

https://gist.github.com/917446

Nó hoạt động như một nét duyên dáng, phải lên đến điểm mà tôi bấm vào một liên kết hoạt động, tại thời điểm đó menu đóng lại, và dường như trả về false.

Tôi làm cách nào để điều hướng đến đích đích thực?

+0

Paul, vui lòng chấp nhận câu trả lời của bạn để giải quyết bài đăng. – isherwood

Trả lời

4

Thay đổi dòng này (dòng 21, qua chức năng):

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

Để này:

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

Mã siêu đầy đủ để nhấp vào 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 đã đăng cập nhật nhanh để trợ giúp tôi trên GitHub .. tại đây: https://gist.github.com/652684 không hoàn toàn phù hợp với tôi.

Lấy mã làm việc của tôi từ liên kết bên dưới.

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

cập nhật .. chỉ trong trường hợp liên kết bao giờ chết ..

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

Chỉ cần tự hỏi tại sao dòng 'location.href = this.href' là cần thiết, tôi đang cố gắng làm cho nó hoạt động mà không có nó mà không có may mắn. Đó là để nói, tại sao nó bị mất hành động deault của thẻ ? Bạn có thể giải thích? – arod

+0

location.href = cửa sổ hiện tại. this.href = một thẻ href. – Paul

Các vấn đề liên quan