jQuery中的显示/隐藏菜单问题答案

【问题标题】：show/hide menu problem in jQueryjQuery中的显示/隐藏菜单问题
【发布时间】：2011-09-27 09:59:14
【问题描述】：

我在使用 jQuery 显示/隐藏菜单时遇到了一个奇怪的行为。

我有一个绝对定位的 div，其中包含一个“激活器” div（相对定位），我想在 moseover 上显示一个菜单。菜单 div 包含在激活器 div 中，也是相对定位的。我一直在假设，因为它会被激活器包含，所以当鼠标移动到显示的菜单时不会触发滚降。当您滚动到显示的菜单上时，显示/隐藏开始跳动，并且即使在鼠标清除该区域后一秒钟左右也会如此。

CSS 看起来像这样

#myAbsolutePos {
 position:absolute;
 height:335px;
 width:213px;
 top:508px;
 left:0;
 z-index:2;
}

#activator {
 position:relative;
 height:35px;
 margin-top:95px;
 text-align:center;
 width:inherit;
 cursor:pointer;
}

#menu {
 position:relative;
 height:255px;
 width:243px;
 top:-45px;
 left:190px;
 padding:20px 25px 20px 25px;
}

#menuContents {
 width:190px;
}

jQuery 函数：

  $('#activator').mouseover(function () {
    $('#menu').show('slow');     
  });

  $('#activator').mouseout(function () {
    $('#menu').hide('slow'); 
  });

HTML：

<div id="myAbsolutePos">
<div id="activator">
  // content

  <div id="menu" style="display:none">
    <div id="menuContents">
    // content
    </div>
  </div>
</div>
</div>

在左下角查看当前天气位置（雷马）的行动问题：http://www.karlsenner.dreamhosters.com/index.php

非常感谢任何建议！

【问题讨论】：

标签： jquery css

【解决方案1】：

你可以试试：

$('#activator').hover(function () {
    $('#menu').show('slow');     
}, function () {
    $('#menu').hide('slow'); 
});

【讨论】：

很高兴我能提供服务:)

【解决方案2】：

我从来没有在调整显示/隐藏时间时遇到过最好的运气。代码可以正常工作：

$('#weatherSelected').mouseover(function(){
  $('#weatherMenu').show();
}).mouseout(function(){
  $('#weatherMenu').hide();
});

我建议的另一件事是不要直接从其托管站点链接到脚本。它使网站管理员因您窃取带宽而生您的气。因此，在您的网站上托管 jquery 循环插件，但使用 google 的 jquery 副本（因为他们允许）：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

【讨论】：