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

您可以像这样分别监听mouseout和click事件，而不是悬停（将2个函数作为参数 - 鼠标悬停和鼠标移除）：

$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()，其中列出了一系列函数来调用交替点击..

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

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

3 个答案: