如果jQuery中的文本太长/不太长，则隐藏/显示元素

我有一个搜索栏，我想在搜索输入字段旁边显示搜索结果

我想让它变得更智能，所以如果在我的例子中搜索结果太长——如果跨度高度大于容器，jQuery会从搜索栏容器中隐藏结果，并在下面显示框

同样，在CSS中，当屏幕宽度达到400时，我隐藏了搜索结果范围，因为无论如何都无法适应任何内容

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

因此，代码首先正常工作，一旦缩小屏幕，当span大于容器时，它被隐藏，新的div显示。现在我遇到两个问题：

当屏幕get小于400px，并且在css中div被关闭时，因为它不在那里，它不会获取高度数据，因此jQ不会启动。我试图在if语句中添加| |$divResults.length==0行，但这也不起作用

缩小屏幕并应用>30语句后，当我想再次使屏幕变大时。Span结果高度现在不大于容器，但我被困在>30的代码中，不确定如何停止这种情况并恢复到屏幕缩小之前的状态

三,。另一个问题是，有时结果垃圾信息会消失，因为它变得很大，但新的div并没有发布，但这不是一个关键问题，因为它只发生在相当窄的像素间距范围内

这是

HTML:

那么：

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

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

    } else {

    $spanResults.show();

};

---

我离得那么近；谢谢

$(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);

    };

};

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

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

    } else {

    $spanResults.show();

};