如果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