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();