Question

我构建了多级菜单，我的HTML结构如下所示：

<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>
   <ul> #this is set up as display: none;
     <li>subitem 1</li>
     <li>subitem 2</li>
     <li>subitem 3</li>
   </ul>
 </li>
 <li>item 3</li>
 <li>item 4</li>
</ul>

我正在解决一个问题，如何在 item1 上移动光标后显示所有子项目。我可以这样做：

   $('ul li ul').mouseover(function() {
      $(this).find('li').show();
   });

但是这对我不起作用...有没有人能帮助我，请问如何显示用于鼠标悬停事件的sub-ul项目块？

谢谢

编辑：感谢您的回复，感谢您的帮助，我已经找到了我的愚蠢错误。

Answer 1

将其附加到父LI，否则没有显示要启动mouseover的元素。

请注意，如果LI中包含UL mouseover的所有内容都是UL with the non-displayed LI's，那么$('ul li ul').parent().mouseover(function() { $(this).find('li').show(); });也可能很难。{/} p>

{{1}}

http://jsfiddle.net/kSq4T/1/

Answer 2

您可以随时在项目元素中添加一个类，并执行以下操作：

       <ul>
 <li class="item">item 1</li>
 <li class="item">item 2</li>
 <li>
   <ul> #this is set up as display: none;
     <li>subitem 1</li>
     <li>subitem 2</li>
     <li>subitem 3</li>
   </ul>
 </li>
 <li>item 3</li>
 <li>item 4</li>
</ul>

$('#item').mouseover(function()
      $(this).children.show();

Answer 3

在$(document).ready

中编写您的函数

$(document).ready(function(){

   $('ul > li > ul').mouseover(function() {
      $(this).find('li').show();
   });

});

使用jQuery获取另一个元素

3 个答案: