如果在jQuery中

懸停功能的語句

這是你會怎麼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>

來源

2014-11-08 RedGiant

哈弗接受雙方的mouseenter和鼠標離開的輸入/輸出處理，所以只使用一個處理程序，並檢查裏面的事件類型。不能在平板電腦上發佈代碼，恕我直言，對不起 – 2014-11-08 11:49:14

你試圖實現什麼？看起來在這裏工作得很好[小提琴]（http://jsfiddle.net/XNnHC/2066/） – 2014-11-08 11:49:45

@ RedGiant：if語句在第一個代碼中工作正常？ – 2014-11-08 11:56:04

解答您的疑問。

Does the function still trigger on the mouseout function?

是的，因爲你綁定鼠標離開時，仍然會閃光。

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事件後

將爲假。

最後。也許最佳的方法是在沒有任何JavaScript的情況下使用簡單的CSS。

要限制初始塊高度，您可以使用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>

來源

2014-11-08 11:58:13 dfsq

如果在jQuery中

回答

相關問題