如果jQuery中的文本長度不是很長，則隱藏/顯示元素

Question

我有一個搜索欄，其中我想在搜索輸入字段旁邊顯示搜索結果。

我想讓它變得聰明，所以如果搜索結果太長（在我的情況下 - 如果跨度高度大於容器），jQuery隱藏搜索欄容器的結果並在下面顯示框。

此外，在CSS我隱藏搜索結果跨度時，屏幕寬度達到了400，因爲沒有辦法，無論如何

@media only screen and (max-width : 400px) {   
    div.results { 
     display: none; 
    } 
} 

因此，代碼工作正常第一次，一旦你縮小屏幕縮小到適合什麼，當跨度比容器更大時，它被隱藏並顯示新的div。現在，我遇到兩個問題：

1. 當屏幕獲得的小於400像素和DIV獲取CSS關掉，因爲它不存在，它沒有得到的高度數據，因此JQ沒有啓動。我試圖將|| $divResults.length() === 0行添加到if聲明中，但這也不能完成這項工作。

2. 縮小屏幕後應用> 30聲明，當我想讓屏幕再次變大時。量程結果高度現在不大於容器，但是我被卡在代碼中，並且不確定如何停止該條件並返回到屏幕縮小之前的狀態。

（3獎金的問題是，有時會導致垃圾郵件消失，因爲它得到很大，但新的div沒有被推出，但是這不是一個關鍵的問題，因爲它只是發生在很窄的像素間隙範圍）

這裏的jsfiddle

HTML：

<div id="container-cpanel"> 

    <div class="search-header"> 
     <div class="search-header-input">Search for friends:</div> 
     <div class="results" style="background: grey"> <span>no search results for... </span>           </div> 
    </div> 

    <div id="container"> 

     <div id="results-popup" class="popup"> 
      <span>No search results for:</span>  
      <div class="button-close"></div> 
     </div> 

     <div class="block"></div> 
     <div class="block"></div> 
     <div class="block"></div> 
     <div class="block"></div> 
     <div class="block"></div> 
    </div> 
</div> 

JQ：

$(document).ready(responsive); 
$(window).on('resize', responsive); 

function responsive() { 

    $('#results-popup').hide(); 

    var $divResults = $('div.results'), 
     $spanResults = $('div.results span'), 
     $resultsPopup = $('#results-popup'), 
     spanResultsHeight = $spanResults.height(); 

    if (spanResultsHeight > 30) { 

     $spanResults.hide(); 
     $resultsPopup.appendTo('#container-cpanel').fadeIn(400); 

    }; 

}; 

Answer 1

怎麼樣：

if (spanResultsHeight > 30 || $divResults.is(':hidden')) { 

    $spanResults.hide(); 
    $resultsPopup.appendTo('#container-cpanel').fadeIn(400); 

    } else { 

    $spanResults.show(); 

}; 

jsFiddle