0

我正在做一个个人项目，只是遇到了一些麻烦。

我正在尝试制作一个简单的悬停菜单。

这个想法是，当用户将鼠标悬停在列表元素上时，它会显示一个 div，而当他们将鼠标悬停在 div 上或最初悬停在 div 上的元素消失时。

例如。

当您将鼠标悬停在其中一个上时，会出现一个 div。

<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>

<div id="link1div"><div id="link1innercontent"></div></div>
<div id="link2div"></div>

现在，当您将鼠标悬停在 li 上时，会出现 div，当您将鼠标悬停在 div 上时，div 会消失。

我想要做的是当你用 li 或 div 鼠标移出时，div 消失了。我遇到了麻烦，因为当我尝试这样做时，两个 div 都消失了。

我的代码如下：

<div id="menu">
<ul>
                        <li id="link_1">Link 1</li>
                        <li id="link_2">Link 2</li>
                    </ul>
</div>

 <div id="link_1"><div id="link1innercontent"></div></div>
    <div id="link_2"></div>

$("#menu li").hover(function(){
var name1 = $(this).attr('id'); //ignore these, they are for selecting appropriate ids
var name = name1.split('_'); //ignore these, they are for selecting appropriate ids
openMenu(name[1]);
$("#m_"+name[1]).mouseleave(function(){ // I have tried $("#m_"+name[1]+",#"+name1) but it 
closeMenu(name[1]);                     // hides the div before you can access it.
});
});


function openMenu(name){
$("#m_"+name).slideDown();  
}

function closeMenu(name){
$("#m_"+name).slideUp();    
}

任何帮助将不胜感激。

4

2 回答 2

0

你这里有奇怪的 JavaScript。:) 这就是我的想法：你想div在鼠标离开时消失，div或者li？因此，由于您不能同时超过两者（将鼠标从一个传递到另一个将触发mouseleave事件），因此您必须执行以下操作：

var t = setTimeout(...)鼠标离开时设置超时变量divOR li（例如 500 毫秒）。此后隐藏 div（在setTimeout处理程序中执行此操作）。

现在，当您将鼠标移到div或li清除此超时时：clearTimeout(t);. 我认为这是大多数人这样做的方式（还有其他方式吗？）。

于 2012-06-08T16:23:35.770 回答
0

你不能对两个元素使用一个 ID，你应该使用 class 代替：

<div id="menu">
<ul>
<li class="link_1">Link 1</li>
<li class="link_2">Link 2</li>
</ul>
</div>

<div class="link_1"><div id="link1innercontent"></div></div>
<div class="link_2"></div>

$("#menu li").hover(function(){
  var name1 = $(this).attr('class'); 
  var name = name1.split('_'); //ignore these, they are for selecting appropriate ids
  $('div.' + name[1]).slideDown() 
  }, function() {
    $('div.' + name[1]).slideup()
 });
于 2012-06-08T16:21:17.960 回答