jquery - 需要 jQuery 选择器来将 悬停在 中

Question

这是我的 XHTML 代码:

<ul id="MenuBar1">
  <li>
    <div class="menuBox">Category 1</div>
  </li>
  <li class="hasasubmenu">
    <div class="menuBox">Category 2</div>
    <ul>
      <li><a href="link.html">Link 1</a></li>
      <li><a href="link.html">Link 2</a></li>
      <li><a href="link.html">Link 3</a></li>
    </ul>
  </li>
  <li class="hasasubmenu">
    <div class="menuBox">Category 3</div>
    <ul>
      <li><a href="link.html">Link</a></li>
      <li><a href="link.html">Link</a></li>
    </ul>
  </li>
  <li>
    <div class="menuBox">Category 4</div>
  </li>
</ul>

实际上，我想制作一个带有悬停交互的菜单来显示子链接。 (无论如何，标准菜单:))

这是我的 JS 代码:

/* menu handler */
$(document).ready(function(){
  $('#MenuBar1 li.hasasubmenu').hover(function(){
    **(selector that select the sub <ul> of the hovered <li>)**.toggle();
  });
});

你能帮我找到将用于切换的选择器(在 JS 代码中以粗体(**)显示)吗？

Answer 1

children()或find()

/* menu handler */
    $(document).ready(function(){
      $('#MenuBar1 li.hasasubmenu').hover(function(){
        $(this).children('ul').toggle(); // select the ul
      });
    });

示例:http://jsfiddle.net/niklasvh/2GY4V/