使用 jQuery 获取另一个元素

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();
   });

但这对我不起作用...任何人都可以帮助我，如何显示鼠标悬停事件的子 ul 项目块？

谢谢

编辑：谢谢你们的回复，感谢你们的帮助，我已经发现了我的愚蠢错误。

Answer 1

将其附加到父 LI，否则不会显示供 mouseover 触发的元素。

另请注意，如果包含 UL 的 LI 中只有 UL 与不显示的 LI 的，也可能很难鼠标悬停。

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

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

Answer 2

您始终可以向 item 元素添加一个类并执行如下操作：

       <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();
   });

});