Question

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

首先，当我用鼠标悬停在链接'meny_1'上并使用mouseover（）函数时，子菜单'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/> 
});

Answer 1

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

Answer 2

你可以尝试使用animate /（fadein / fadeout）/ fadeout。

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

Answer 3

回答你的第二个问题：隐藏一些东西而不删除元素？使用jquery隐藏你可以使用$（“＃div”）。hide（）或$（“＃div”）。css（“display”，“none”）;

Answer 4

如果您正在寻找淡入淡出效果，那么您可以使用fadein / fadeout代替show / hide。

然而，如果你想要的只是隐藏可见性，然后没有效果，代替show / hide我个人更喜欢创建一个像这样的hide css类。

.hide{display:none; !important}

然后使用.addClass（hide）/ .removeClass（hide）

http://www.nitinh.com/2011/05/how-to-properly-hide-and-show-elements-using-javascript/

的详细信息

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

Answer 5

关于鼠标事件，mouseleave()的jQuery API显示了mouseleave（）和mouseout（）之间的区别，可能会帮助你解决问题。

实质上，当鼠标进入或离开元素的边界时，mouseenter（）/ mouseleave（）事件会触发。只要鼠标从一个<div>移动到另一个{{1}}，mouseover（）/ mouseout（）事件就会触发。

如果我理解你的可见性问题，show（）和hide（）的工作方式与之前的工作相同，hide（0）会立即隐藏元素。你想要的效果会不同吗？

mouseout问题并寻找hide（）和show（）的替代方法？

5 个答案: