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

私はあなたが何を望んでいるのか完全にはわかりませんが

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

これが問題だと思います、試してみてください

height : 20px

アップデート：

max-height {
   20px;
}
于 2012-12-10T04:10:04.067 に答える
1

これは、 の最小幅が原因です<div class="inner">。<div class="menuSquare" >が消費されていない場合、with<div class="inner">は 110px であるため、<p>Word 内のテキストは 2 行以上に折り返されます。次に、あなたの（ワードラップされた）高さ$(.inner).height()を取得します<div class="inner">

この問題を解決するには、最小幅を 190 に変更します ( と同じ<div class="menuSquare">) 。

于 2012-12-10T04:08:03.050 に答える