Question

请查看此fiddle

这是你如何在悬停函数中放置if语句？

$( ".nn" ).hover(
  function() {
   if($(this).find('p').height() > $(this).height())
   {
    $( this ).css( "height","auto" ).removeClass("oh");
   }
  }, function() {

    $( this ).css( "height","6em" ).addClass("oh");

  }
);

由于if语句仅适用于第一个函数（mouseover），该函数是否仍会在mouseout函数上触发？是否可以将if语句包装在整个悬停函数周围，如下所示：

    $( ".nn" ).hover(

    function() {
    if($(this).find('p').height() > $(this).height())
    {
       $( this ).css( "height","auto" ).removeClass("oh");

      }, function() {

        $( this ).css( "height","6em" ).addClass("oh");

      }
    }
    );

HTML

很长的文字

<div class="nn oh"><p>short text</p></div>

Answer 1

回答你的问题。

1。 Does the function still trigger on the mouseout function?

是的，因为你绑定了mouseleave事件，它仍然会触发。

2。 Is it possible to wrap the if statement around the entire hover function?

不，您可以使用相同的if块包装两个单独的回调函数。但是，您可以采用另一种方法并手动绑定mouseenter和mouseleave（因为hover只是这两个事件的糖）。它看起来像这样：

$(".nn").on('mouseenter mouseleave', function(e) {
    if ($(this).find('p').height() > $(this).height()) {
        if (e.type == 'mouseenter') {
            $(this).css("height", "auto").removeClass("oh");
        }
        else {
            $(this).css("height", "6em").addClass("oh");
        }
    }
});

但是你会意识到这是不你需要什么，因为在这种情况下你永远不会进入else分支，因为条件：

$(this).find('p').height() > $(this).height()

在mouseenter事件后，

将为false。

<强>最后即可。也许这里的最佳方法是使用简单的CSS而不需要任何javascript。

要限制初始块高度，请使用max-height: 6em。然后，.nn:hover规则将使用max-height: inherit; height: auto;进行扩展。

.nn {
    border-bottom: 0.8em solid #B1B3BE;
    font-size: 25px;
    max-height: 6em;
    margin: 6% 0;
    background: #eee;
    padding: 3%;
    border-bottom: 0.3em solid #6F87B3;
    width:40%;
    display:block;
    overflow: hidden;
}
.nn:hover {
    max-height: inherit;
    height: auto;
    overflow: auto;
}

<div class="nn oh">
    <p>ddddddddddddd dsffffffffff fffffffff dffffff ffff fgdgfdfgddfg ffgdfdgdfgdfg dfggdfdgfd fdsdgfdfgdgf fdgfdgf gf</p>
</div>
<div class="nn oh">
    <p>ddddddddddddd</p>
</div>

如果在Jquery中的hover函数中有语句

1 个答案: