mouseout 问题并寻找 hide() 和 show() 的替代方法？答案

【问题标题】：Problem with mouseout and looking for alternative to hide() and show()?mouseout 问题并寻找 hide() 和 show() 的替代方法？
【发布时间】：2011-06-09 12:09:03
【问题描述】：

我正在使用 jQuery 创建一个简单但很大的下拉菜单。我对此有一些疑问，希望能得到一些帮助。

首先，当我使用 mouseover() 函数将鼠标悬停在链接“meny_1”上时，子菜单“undermeny_a”会使用 show() 函数显示。子菜单位于名为“undermeny_1”的 div 中。使用 mouseout() 函数删除 div。但是，如果我将该 div 划分为其他 div，则 mouseout() 函数将不起作用。好像它不再检测主 div 'undermeny_1' 了？我想知道如何解决这个问题？

其次，我想知道是否有任何替代使用 show() 和 hide()。我希望 div 元素位于页面其他 div 元素上方的背景中，但在将鼠标悬停在链接“meny_1”上方之前不可见？在普通的 javascript 中，我曾经使用可见性或隐藏，这可以用 jQuery 完成吗？隐藏一些东西而不删除元素？感谢一些帮助。谢谢！

$(document).ready(function() {   
    $("#meny_1").mouseover(function(){
        $("#underMeny_1").show();
    });
    $("#underMeny_1").mouseout(function(){
        $("#underMeny_1").hide();<br/>
    });<br/> 
});

【问题讨论】：

上传一个小提琴，这样我们就可以看看它......并了解实际发生了什么......以及没有发生什么
您是否考虑过使用现有的 jquery 插件来执行下拉菜单。那里有很多。从头开始编写一个可能非常繁琐，尤其是在鼠标从一个子菜单移动到另一个子菜单时保持正确的 div 可见时。
嗯，能够自己做某事会带来更大的满足感。我不需要像你可以下载的那样花哨。我很确定创建这种类型的菜单并不难。

标签： javascript jquery

【解决方案1】：

关于鼠标事件，mouseleave() 的 jQuery API 显示了 mouseleave() 和 mouseout() 之间的区别，可能会对您有所帮助。

本质上，mouseenter() / mouseleave() 事件在鼠标进入或离开元素边界时触发。只要鼠标从一个<div> 移动到另一个，就会触发 mouseover() / mouseout() 事件。

如果我了解您的可见性问题，show() 和 hide() 可以像在 hide(0) 将立即隐藏元素之前一样工作。有没有你想要的不同效果？

【讨论】：

我正在寻找类似这样的东西 document.getElementById("div name").style.visibility='visible';这不是删除元素，只是隐藏它！
据我了解， .hide() 不应删除该元素。这就是 .remove() 或 .detach() 方法的用途。 $("#divId").hide(0); 应该设置为display: none。
来自jQuery API: "匹配的元素会立即隐藏，没有动画。这大致相当于调用.css('display', 'none')，除了display 属性保存在 jQuery 的数据缓存中，以便稍后可以将显示恢复为其初始值。如果元素的显示值为 inline，则隐藏并显示，它将再次内联显示。"

【解决方案2】：

你可以试试toggle()。我不确定你想要什么。 toggle() 是 show() 和 hide() 的另一种可用替代方法。如果元素可见则隐藏元素，反之亦然

【讨论】：

toggle() 不是show() 和hide() 的替代品，它允许使用切换效果执行我们选择的某些操作，而切换效果不一定是隐藏/显示..就 user790843: 而言，这可能没有用
我同意@Abdul 切换可以包含任何效果
如果我使用 toggle() 是隐藏还是删除了元素？
您可以通过切换使用任何效果。检查一下here
@user790843 with toggle() 元素被隐藏了

【解决方案3】：

您可以尝试使用动画/（淡入/淡出）/淡出。

为什么当你从菜单中鼠标移出时菜单没有删除，那么你可以使用 .hover() 方法。为什么不是 ul 列表？

【讨论】：

菜单被删除，尽管我“在”div“underMeny_1”中。当鼠标悬停在 div“underMeny_1”内的另一个 div 上时，就会发生这种情况。 meny_1 是 ul 列表的一部分。
可能是您的 CSS 而不是您的 jQuery 的问题，在可视化正在发生的事情时遇到了一些问题，也许可以尝试上传您的文件以便我们查看

【解决方案4】：

回答你的第二个问题：隐藏一些东西而不删除元素？要使用 jquery 隐藏，您可以使用 $("#div").hide() 或 $("#div").css("display", "none");

【讨论】：

嗯，但 $("#div").hide() 与我在代码中使用的不一样吗？那将删除元素？有没有像过去那样使用 document.getElementById("div name").style.visibility='visible'; 的方法？ ??
.hide() 不会删除元素。它只会设置其样式（显示：无）从而隐藏它。 .hide() 类似于 .style.visibility ，但是 style.display .. 阅读它

【解决方案5】：

如果您正在寻找淡入淡出效果，那么您可以使用淡入/淡出代替显示/隐藏。

但是，如果您只想隐藏可见性，并且没有效果，那么我个人更喜欢创建一个这样的隐藏 css 类来代替显示/隐藏。

.hide{display:none; !important}

然后使用 .addClass(hide) / .removeClass(hide)

关于你的第一点，我不确定我是否理解正确。如果能给我们一个演示链接就更好了。

【讨论】：