悬停的DropDown多级菜单 [英] DropDown multilevel menu with hover

问题描述

 < script type =text / JavaScript的> 
 $（document）.ready（function（）{
 $（'＃nav ul'）。hide（）; 
 
 $（'＃nav li> a' ）.hover（
 function（）{$（'ul'，this.parentNode）.stop（）。slideDown（100）;} 
）; 
 
 $（' （）; 
函数（e）{$（'ul'，this.parentNode）.stop（）。slideUp（100）;} 
）; 
 
} 
）; 
< / script> 
 
< ul id =nav> 
< li>< a href =＃>家长A< / a> 
< ul> 
< li>< a href =＃> Sub a1< / a> 
< ul> 
< li>< a href =＃>项目a1.1< / a>< / li> 
< li>< a href =＃>项目a1.2< / a>< / li> 
< li>< a href =＃>项目a1.3< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃> Sub a2< / a>< / li> 
< li>< a href =＃> Sub a3< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃>家长B< / a> 
< ul> 
< li>< a href =＃> Sub b1< / a>< / li> 
< li>< a href =＃> Sub b2< / a>< / li> 
< li>< a href =＃> Sub b3< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
  

我在子菜单下添加了第三级以上，但不打开和关闭最后一级。

在这种情况下，我不确定是否需要更改html代码，或者是否只需要更改JavaScript，以便脚本可以正常工作。

解决方案

您可以这样做：

  $（'＃nav ul'）。hide（）; 
 $ b $（'＃nav li> a'）。hover（
 function（）{
 //显示其子菜单
 $（this）.parent（ ）.children（'ul'）。stop（）。slideDown（100）; 
} 
）; 
 $（'＃nav li'）。hover（null，
 function（e）{
 //隐藏它的子菜单
 $（this）.children（'ul'） .stop（）。slideUp（100）; 
} 
）; 
  

查看工作 演示

The following is basic working DropDown menu, child’s appear on hover the parent text.

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

    $('#nav li > a').hover(
      function () {$('ul', this.parentNode).stop().slideDown(100);}
    );

   $('#nav li').hover(null, 
      function (e) {$('ul', this.parentNode).stop().slideUp(100);}
   );

  }
  );
</script>

<ul id="nav">
  <li><a href="#">Parent A</a>
    <ul>
      <li><a href="#">Sub a1</a>
          <ul>
            <li><a href="#">Item a1.1</a></li>
            <li><a href="#">Item a1.2</a></li>
            <li><a href="#">Item a1.3</a></li>
        </ul> 
      </li>
      <li><a href="#">Sub a2</a></li>
      <li><a href="#">Sub a3</a></li>
    </ul>
  </li>
  <li><a href="#">Parent B</a>
    <ul>
      <li><a href="#">Sub b1</a></li>
      <li><a href="#">Sub b2</a></li>
      <li><a href="#">Sub b3</a></li>
    </ul> 
  </li>
</ul>

I’ve added above a third level under submenu, but it's not opening and closing the last level.

I’m not sure in this case if I need to change the html code or is it only the JavaScript that needs to be changed so that the script will work properly.

解决方案

You can do it as follows:

   $('#nav ul').hide();

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

See working demo

这篇关于悬停的DropDown多级菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！