嘿,我有以下 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>