Как создать простое меню с jQuery?

Question

У меня есть меню в боковом месте и что код:

<ul> 
<li> 
    <span class="arz"> 
     first menu 
    </span> 
    <ul id="arz"> 
     <li> 
      first submenu 
     </li> 
     <li> 
      second submenu 
     </li> 
     <li> 
      third submenu 
     </li> 
    </ul> 
</li> 
<li class="words"> 
    two menu 
    <ul id="words"> 
     <li> 
      first submenu 
     </li> 
     <li> 
      second submenu 
     </li> 
    </ul> 
</li> 

и код JQuery является:

$(document).ready(function(){ 
    $(".submenu").click(function(){ 
     $(this).children(this).slideToggle("slow"); 
    }); 
}); 

, но я хочу, нажав на первом менюul элемент с id="arz" using slideToggle ,
this code do it but when i click on every submenu item corresponding ul use slideToggle`. благодарю
aya

Answer 1

В вашем коде jquery вы ссылаетесь на класс, которого нет в вашем html. Вот почему он не работает. Вот что-то слегка модифицирована, который работает, как вы можете видеть в этом jsFiddle example

HTML

<style> 
    ul.submenu{display:none;background:#ccc;} 
</style> 
<ul class="menu"> 
    <li class="arz"> 
     <span>first menu</span> 
     <ul id="arz" class="submenu"> 
      <li> 
       first submenu 
      </li> 
      <li> 
       first submenu 
      </li> 
      <li> 
       first submenu 
      </li> 
     </ul> 
    </li> 
    <li class="words"> 
     <span>second menu</span> 
     <ul id="words" class="submenu"> 
      <li> 
       second submenu 
      </li> 
      <li> 
       second submenu 
      </li> 
      <li> 
       second submenu 
      </li> 
     </ul> 
    </li> 
</ul> 

JQuery

$(function(){ 
    $('ul.menu li').click(function(){ 
     $(this).find('ul.submenu').slideToggle('slow') 
    }) 
})