滑動切換和多個元素

Question

我遇到了一些簡單的滑動問題，我必須應用於多個<li>元素。

例子：

<ul id="serv"> 
    <li id="01">Assistenza</li> 
    <li id="02">Riparazione</li> 
    <li id="03">Manutenzione</li> 
    <li id="04">Rifacimento Macchina</li> 
</ul> 

<div id="box01"></div> 
<div id="box02"></div> 
<div id="box03"></div> 
<div id="box04"></div> 

現在我只是單純的想，當我點擊01 Box01的節目，02 box02節目..等等 所以..

<script> 
    $('#01').click(function() { 
    $('#box01').slideToggle() 
    }) 
</script> 

在這種情況下，我應該有爲每一個單身份證重複這個。如果我有很多元素？有沒有辦法簡化這個過程，讓我「少寫多做」？

非常感謝您的寶貴幫助。

Answer 1

試試這個：

$('li').click(function() { 
    $('#box'+$(this).attr('id')).slideToggle() 
}) 

jsFiddle example

Answer 2

<ul id="serv"> 
    <li class="toggler" id="01">Assistenza</li> 
    <li class="toggler" id="02">Riparazione</li> 
    <li class="toggler" id="03">Manutenzione</li> 
    <li class="toggler" id="04">Rifacimento Macchina</li> 
</ul> 

$('.toggler').click(function() { 
    $('#box' + $(this).attr('id')).slideToggle() 
} 

要添加手風琴功能：

$('.toggler').click(function() { 
    $('li').slideUp(); 
    $('#box' + $(this).attr('id')).slideToggle() 
}