jquery - 我尝试将悬停功能更改为单击功能

Question

我是新手：/

我找到了这段代码，只是想将“悬停”更改为“点击”。不幸的是，这不起作用。然后我读到了一个类似的问题，有人建议插入obj.on('click', [selector,] function()而不是悬停。

这也行不通。

那么，我怎样才能让这个代码只在点击而不是悬停时工作？下面是原始代码。如果有人能帮忙就好了。

(function($) {
     $.fn.hoverexpand = function(options) {
     var defaults = {
       minHeight: '100px',           
       collapsedClass: 'expand-me',  
 event
       hoverTime: 250                /
     };
     var options = $.extend(defaults, options);

     return this.each(function() {
       var $obj = $(this);
       var origHeight = $obj.css('height');
       var timer = null;

       if( parseInt(origHeight) > parseInt(options.minHeight)) {
         $obj.css({
           height: options.minHeight,
           overflow: 'hidden'
         }).addClass(options.collapsedClass);

         $obj.hover(
           function() {  // click not mouseover
             if(!timer) {
               timer = window.setTimeout(function() { 
                 $obj.animate({height: origHeight }, 250).removeClass(options.collapsedClass);       //expand
                 timer = null;
               }, options.hoverTime);
             }
           },
           function() {  // mouseout
             if(timer) {
               window.clearTimeout(timer);
               timer = null;
             } else {
               $obj.animate({height: options.minHeight}, 250).addClass(options.collapsedClass);    //contract
             }
           }
         );
       }
     });   }; })(jQuery);

Answer 1

而不是悬停（它需要 2 个函数作为参数 - mouseover 和 mouseout），您可以像这样分别监听mouseout和click事件：

$obj.on('mouseout', function(){
  //do things
});

$obj.on('click', function(){
  //do things
});

（有关详细信息，请参阅http://api.jquery.com/on/ ）

Answer 2

将.hover()（使用 mouseenter/mouseleave）函数替换为：

$obj.on({
    click : function() {  // click
        if(!timer) {
          timer = window.setTimeout(function() { 
            $obj.animate({height: origHeight }, 250).removeClass(options.collapsedClass);       //expand
            timer = null;
          }, options.hoverTime);
        }
     },
     mouseleave: function() {  // mouseout
        if(timer) {
          window.clearTimeout(timer);
          timer = null;
        } else {
          $obj.animate({height: options.minHeight}, 250).addClass(options.collapsedClass);    //contract
        }
     }
});

Answer 3

使用 .toggle()which 需要一个函数列表来调用交替点击..

所以而不是$obj.hover使用$obj.toggle