jQuery的子菜單就像在網頁上<a href="http://oshadi-yoga.ch" rel="nofollow">oshadi-yoga.ch</a>手風琴

Question

我想獲得一個導航菜單，像這樣的列表：

<ul> 
    <li class="section-title">Yoga 
     <ul style="display: none;"> 
      <li><a href="/">Approach</a></li> 
      <li><a href="/">Asanas</a></li> 
      <li><a href="/">Yoga</a></li> 
      <li><a href="/">Kirtan</a></li> 
     </ul> 
    </li> 
</ul> 

我寫了一些jQuery來得到一個手風琴效果。如果你點擊第一級第二清單應與切換效果開：

$(function() { 
     $("#lbar li.section-title ul").hide(); 
     $("#lbar li.section-title").click(function() { 
      $(this).find("ul").toggle(); 
     }); 
    }); 

    $(function() { 
     $("#lbar li.section-titleact ul").show(); 
     $("#lbar li.section-titleact").click(function() { 
      $(this).find("ul").toggle(); 
     }); 
    }); 

    $(function() { 
     $("#lbar li.section-titleact ul li a").click(function() { 
      $("#lbar li.section-titleact ul").css("display", "block"); 
     }); 
    }); 

現在當你打開頁面的子菜單是隱藏的。這是對的。您單擊一個菜單項並顯示子菜單。這是對的。沒有鏈接到第一級的頁面。那麼您在第二級點擊鏈接打開該頁面，但第二級<ul>隱藏幾秒鐘。這是錯誤。

不幸的是我無法更正jquery腳本。有人可以幫助我或有一個我需要的菜單的例子嗎？

Answer 1

我應該重寫代碼人小

<ul> 
    <li class="section-title"><span>Yoga</span> 
     <ul style="display: none;"> 
      <li><a href="/">Approach</a></li> 
      <li><a href="/">Asanas</a></li> 
      <li><a href="/">Yoga</a></li> 
      <li><a href="/">Kirtan</a></li> 
     </ul> 
    </li> 
</ul> 

增加了一個跨度。

的jQuery：

$('.section-title > span').on('click', function() 
{ 
    $(this).siblings('ul').slidetoggle(); 
}); 

我希望這有助於有點