Jq写个联级菜单

这个效果很好看，Jq很容易实现：

    $(document).ready(function(){
        
        $('.menu li').hover(function(){
            
              $(this).children('ul').show();
              
              $(this).focus().addClass('focusa')    
          
          },function(){
          
              $(this).children('ul').hide();

              $(this).focus().removeClass('focusa')    
    
        });
        
    });

当   hover ，执行 函数 来show ， 当移出 ，执行函数 来hide。 同时这里用到了链式操作          

 $('').hover(function(){},function(){});

附上html参考，我删减了部分

<div class="container">
  <ul class="menu">
    <li><a href="#">菜单一</a>
      <ul class="one">
        <li><a href="#">菜单一</a></li>
        <li><a href="#">菜单二</a></li>
        <li><a href="#" class="more">菜单五</a>
          <ul class="two">
            <li><a href="#">菜单一</a></li>
            <li><a href="#">菜单二</a></li>
            <li><a href="#" class="more">菜单五</a>
              <ul class="hdw">
                <li><a href="#">菜单一</a></li>
                <li><a href="#">菜单二</a></li>
                <li><a href="#"  class="more">菜单五</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">菜单二</a>
      <ul class="one">
        <li><a href="#">菜单一</a></li>
        <li><a href="#">菜单二</a></li>
        <li><a href="#" class="more">菜单三</a>
          <ul class="two">
            <li><a href="#">菜单一</a></li>
            <li><a href="#">菜单二</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">菜单三</a></li>
  </ul>
</div>

 

---

 

难的是样式

 

转载于:https://www.cnblogs.com/iampengl/p/9240641.html