Question

嘿所有我有以下jsfiddle＆gt; Fiddle我需要一些帮助。

当我将鼠标放在它上面时 - 它会扩展到静态宽度，但是，根据文本长度，它会通过内部文本 $（'。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')
    }
}

HTML：

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

Answer 1

这是因为<div class="inner">的 min-widht 。当<div class="menuSquare" >没有花费时，<div class="inner">的内容为110px，因此<p> Word中的文本包含两行或更多行。然后$(.inner).height()获取<div class="inner">

的（Word Wrapped）身高

所以要想出这个问题，只需将你的最小宽度改为190（与<div class="menuSquare">相同）

Answer 2

我不完全确定你想要什么，但是

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

我想这是问题，请尝试

height : 20px

更新

max-height {
   20px;
}

jQuery动画菜单高度

2 个答案: