0

嘿，我有以下 jsfiddle > 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>
4

2 回答 2

1

这是因为. <div class="inner">当<div class="menuSquare" >没有用完的时候，with of<div class="inner">是 110px，所以<p>Word 中的文本被换成了两行或更多行。然后$(.inner).height()得到你的（Word Wrapped）高度<div class="inner">

所以要弄清楚这个问题，只需将您的最小宽度更改为 190（与 相同<div class="menuSquare">）

于 2012-12-10T04:08:03.050 回答
1

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

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

估计是这个问题，试试

height : 20px

更新：

max-height {
   20px;
}
于 2012-12-10T04:10:04.067 回答