jQuery动画菜单高度

嘿，我有以下jsfiddle>需要帮助

当我将鼠标放在它上面时，它会扩展到一个静态宽度，但根据文本长度，它会抓住内部的文本$（'.inner'）.height（）

---

问题是它超出了最后一个文本列表项的范围，当我滚动菜单框中的任何文本时，它会向后滑动一点。如何防止它（1）向后滑动和（2）具有所需的准确高度，而在箱子底部甚至没有额外的空间来容纳其高度

JS:

$(document).ready(function() {
    $('#menuSquare, .inner').mouseout(function() {
        theMenu('close');
    });

    $('#menuSquare, .inner').mouseover(function() {
        theMenu('open');
    });
});

function theMenu(what2Do) {
    if (what2Do == 'open') {
        $('#menuSquare').stop().animate({
            width: 190, //95
            height: $('.inner').height(),
            duration:900,
            'padding-top' : 10,
            'padding-right' : 10,
            'padding-bottom' : 10,
            'padding-left' : 10,
            backgroundColor: '#fff',
            opacity: 0.8
        }, 1000,'easeOutCubic')
    } else {
        $('#menuSquare').stop().animate({
            width: "20",
            height: "20",
            padding: '0px',
            backgroundColor: '#e51937',
            opacity: 0.8
        }, 500,'easeInCirc')
    }
}​

<div id="menuSquare" class="TheMenuBox" style="overflow: hidden; width: 20px; height: 20px; background-color: rgb(229, 25, 55); opacity: 0.8; padding: 0px;">
    <div class="inner">
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Custom Homes');">Custom Homes</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Full Service Hotels');">Full Service Hotels</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Mixed Use');">Mixed Use</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Office');">Office</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Retail');">Retail</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Select Service Hotels');">Select Service Hotels</p>   
    </div>
</div>

HTML:

$(document).ready(function() {
    $('#menuSquare, .inner').mouseout(function() {
        theMenu('close');
    });

    $('#menuSquare, .inner').mouseover(function() {
        theMenu('open');
    });
});

function theMenu(what2Do) {
    if (what2Do == 'open') {
        $('#menuSquare').stop().animate({
            width: 190, //95
            height: $('.inner').height(),
            duration:900,
            'padding-top' : 10,
            'padding-right' : 10,
            'padding-bottom' : 10,
            'padding-left' : 10,
            backgroundColor: '#fff',
            opacity: 0.8
        }, 1000,'easeOutCubic')
    } else {
        $('#menuSquare').stop().animate({
            width: "20",
            height: "20",
            padding: '0px',
            backgroundColor: '#e51937',
            opacity: 0.8
        }, 500,'easeInCirc')
    }
}​

<div id="menuSquare" class="TheMenuBox" style="overflow: hidden; width: 20px; height: 20px; background-color: rgb(229, 25, 55); opacity: 0.8; padding: 0px;">
    <div class="inner">
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Custom Homes');">Custom Homes</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Full Service Hotels');">Full Service Hotels</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Mixed Use');">Mixed Use</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Office');">Office</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Retail');">Retail</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Select Service Hotels');">Select Service Hotels</p>   
    </div>
</div>

自定义主页

全方位服务酒店

混合使用

办公室

零售业

选择服务型酒店
这是因为
的最小宽度。当
没有花费时，
的with是110px，因此
单词中的文本被包装成两行或多行。然后
$（.inner.height（）
获取您的

因此，为了解决这个问题，只需将最小宽度更改为190（与
相同）
我不完全确定您想要什么，但是

  height: $('.inner').height(),

我想这就是问题所在，试试看

height : 20px

更新：

max-height {
   20px;
}

“问题是，它超出了最后一个文本列表项的范围，当我滚动菜单框中的任何文本时，它会向后滑动一点。”-我不明白列表会变大，所以如果我给它一个静态高度，那么所有其他菜单项都会被切断。明白了，泰菲！谢谢