Question

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

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

这个想法是当用户将鼠标悬停在列表元素上时显示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();    
}

非常感谢任何帮助。

Answer 1

你不能将一个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()
 });

Answer 2

您在这里有奇怪的JavaScript。 :)这就是我的想法：当鼠标离开div或div时，您希望li消失？因此，既然你不能同时超过两者（将鼠标从一个传递到另一个将触发mouseleave事件），这就是你必须做的事情：

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

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

JQuery Multiple id隐藏1个div

2 个答案: