jquery 3级菜单

Question

我正在尝试制作3级垂直菜单

我有2级，但很难让它达到3级......

这是我的2级垂直菜单......

http://fiddle.jshell.net/3Xvrc/1/

是的，任何人都可以帮助我吗？

Answer 1

jsBin demo

(function($){ 

  $('.menu a').click(function( e ){
      e.preventDefault();
      $(this).parent('li').find('ul:first').slideToggle();    
  });

})(jQuery);

HTML：

<ul class="menu">

    <li>
      <a href="#">1 level</a>   
      <ul class="depth2">
        <li><a href="#">2 level</a></li>
        <li><a href="#">2 level</a></li>
      </ul> 
    </li>

    <li><a href="#">1 level (no 2 level)</a></li> 

    <li>
      <a  href="#">1 level</a>
        <ul>
            <li><a href="#">2 level</a></li>
            <li>
                <a href="#">2 level (with 3 level)</a>
                <ul>
                    <li><a href="#">3 level</a></li>
                    <li><a href="#">3 level</a></li> 
                </ul>
            </li> 
        </ul>
    </li> 

</ul> 

CSS：

 .menu {
  width:200px;
  padding:0;
}
 .menu li { 
  background:#CCC;
  margin:0;
} 
 .menu li {
  display:block;
  color:#000;
  overflow:hidden;
}
 .menu li a {
  display:block;
  padding:5px 0;
  color:#06C;
  border-bottom:1px solid #666; 
} 
 .menu li > ul {
  display:none;
  overflow:hidden;
  padding:10;
} 
.menu p ul.depth2 li a{ 
  color:#fff;
  display:block; 
}

Answer 2

您可以使用此

$('a').on('click', function(evt){
  $(this).next().slideToggle();
});

示例here

问候。