jquery - 滑动切换和多个元素

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>

在这种情况下，我应该对每个 id 重复此操作。如果我有很多元素？有没有办法简化这个过程，让我“少写多做”？

非常感谢您的宝贵帮助。

Answer 1

尝试这个：

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

jsFiddle 示例

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