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

【问题标题】：I try to change a hover function into a click function我尝试将悬停功能更改为单击功能
【发布时间】：2012-07-30 11:08:48
【问题描述】：

我是新手：/

我找到了这段代码，只是想将“悬停”更改为“点击”。不幸的是，这不起作用。然后我读到了一个类似的问题，有人建议插入 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);

【问题讨论】：

将 $obj.hover 更改为 $obj.click
欢迎来到 Stack Overflow。如果您想在问题中包含一段代码，请将其缩进四个空格，或选择它并单击{} 按钮。（不要在每行的开头使用>，这会创建文本的块引用，而不是代码。）您还可以通过使用 ` 字符引用代码内联代码。

标签： jquery click hover

【解决方案1】：

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

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

【讨论】：

非常感谢你们所有人。 .toggle() 效果很好。我会记住正确的块代码的提示。对此感到抱歉。
您好，我还有一个问题：是否可以防止此代码覆盖 (url) 链接功能？我的意思是它是有道理的，因为你可以打开和关闭它。但是，如果容器中有一个或多个链接，该怎么办？指针识别出正确的链接，但是当我按下时……嗯，是的，它关闭了容器 o.O
@peter 在第二个函数中将else 更改为else if (obj.is(':not(a)'))

【解决方案2】：

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

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

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

（详情请参阅http://api.jquery.com/on/）

【讨论】：

除此之外.. 我对这里那些快速而有帮助的回复印象深刻。这真是太棒了！再次感谢^^
不客气，但你应该accept an answer ;)

【解决方案3】：

将.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
        }
     }
});

【讨论】：