jquery html submenu点击显示/隐藏

Question

jquery newbie here。我在这里创建了垂直菜单。

我的目标是什么， 当第一个点击时，它会显示子菜单。 当点击第二个li时，它将显示1级子菜单，并且第一个li将被关闭。如果我点击1级子菜单，它会显示2级子菜单，并保持打开状态。

这是我迄今所做http://jsfiddle.net/f4cfh6kx/2/

HTML：

首先

<ul> 
     <li><a href="#">Second</a> 

     </li> 
     <li><a href="#">Second</a> 

     </li> 
     <li><a href="#">Second</a> 

     </li> 
    </ul> 
</li> 
<li class="showFirst"><a href="#">First<span 
        class="sb-caret"></span></a> 

    <ul> 
     <li class="showSecond"><a href="#">Second<span 
          class="sb-caret"></span></a> 

      <ul> 
       <li><a href="#">third</a> 

       </li> 
       <li><a href="#">third</a> 

       </li> 
      </ul> 
     </li> 
     <li><a href="#">Second</a> 

     </li> 
     <li><a href="#">Second</a> 

     </li> 
    </ul> 
</li> 

JSP：

$(function() { 
$('.showFirst').click(function() { 
    $(this).children('ul').slideToggle(); 
    $('.showFirst > li').not(this).find('ul').slideUp(); 
}); 
$('.showSecond').click(function() { 
    $(this).children('ul').slideToggle("slow"); 
}); 

}); 

CSS：

ul { 
list-style: none; 
cursor: pointer; 
} 
a { 
    color: black; 
    line-height: 25px; 
    text-decoration: none; 
} 
a:hover { 
    color: #aaa; 
    text-decoration: none; 
} 
span.sb-caret { 
    width: 0px; 
    height: 0px; 
    display: inline-block; 
    margin: 0px 5px; 
    border: 5px solid transparent; 
} 
span.sb-caret { 
    /* Caret Down */ 
    border-top: 5px solid; 
    border-bottom: 0px solid transparent; 
} 
.sb-submenu-active > span.sb-caret { 
    /* Caret Up */ 
    border-top: 0px solid transparent; 
    border-bottom: 5px solid; 
} 
ul li > ul { 
    display: none; 
    /* border:1px solid black; */ 
} 

Answer 1

JS Fiddle

$('.showSecond').click(function() { 
    $(this).children('ul').slideToggle("slow"); 
    return false; /** add this line **/ 
}); 

编辑切换

JS Fiddle

刚刚从下面的代码删除li

$('.showFirst').not(this).find('ul').slideUp();