javascript - Jquery悬停函数中的If语句

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. 函数是否仍然在 mouseout 函数上触发？

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

2. 是否可以将 if 语句包裹在整个悬停函数周围？

不，您可以用同一个 if block 包装两个单独的回调函数。但是，您可以采用另一种方法并手动绑定(bind) 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。

要限制初始 block 高度，您可以使用 max-height: 6em。然后 .nn:hover 规则将负责扩展 max-height: inherit;高度:自动；。

.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>