Question

我在使用简单的slidetoggle时遇到了一些问题，我必须在多个<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 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()
}

幻灯片切换和多个元素

2 个答案: