javascript - 在父文本上悬停的下拉菜单

以下是基本的DropDown菜单，子菜单出现在父悬停菜单上。

<script type="text/javascript">
  $(document).ready(function () {
    $('#nav li').hover(
      function () {
      //show its submenu
        $('ul', this).stop().slideDown(100);
      },
      function () {
      //hide its submenu
        $('ul', this).stop().slideUp(100);
      }
    );
  });
</script>

<style type="text/css">
  #nav li {background-color:#CCC; }
</style>

<ul id="nav">
  <li><a href="#" class="selected">Parent A</a>
    <ul>
      <li><a href="#">Item a1</a></li>
      <li><a href="#" class="selected">Item a2</a></li>
      <li><a href="#">Item a3</a></li>
    </ul>
  </li>
  <li><a href="#">Parent B</a>
    <ul>
      <li><a href="#">Item b1</a></li>
      <li><a href="#">Item b2</a></li>
      <li><a href="#">Item b3</a></li>
      <li><a href="#">Item b4</a></li>
    </ul>
  </li>
</ul>

当前，当鼠标悬停在父框区域的任意位置（即，在文本外部，父div的不可见区域）时，就会显示孩子的名字。

我希望孩子仅出现在父链接的悬停上（仅在“ href”文本上）。

我在任何地方都找不到答案。

最佳答案

尝试将a元素用作hover的目标，而不是整个li的目标，如下所示：

<script type="text/javascript">
  $(document).ready(function () {
    $('#nav ul').hide();

    $('#nav li > a').hover(
      function () {
      //show its submenu
        $('ul', this.parentNode).stop().slideDown(100);
      }
    );
   $('#nav li').hover(null,
      function (e) {
      //hide its submenu
        $('ul', this.parentNode).stop().slideUp(100);
      }
   );
  });
</script>

参见工作demo。

关于javascript - 在父文本上悬停的下拉菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13804909/