jquery - 这个 jQuery SlideToggle 函数有什么问题？

Question

我有一个票证管理程序，我正在尝试使用 jQuery 添加“ Accordion ”风格的功能。该程序是用 PHP 编写的。输出 HTML 如下所示:

<div class="eachticketwrapper">
     <div class="simpleticketview">
           <ul class="displayinline ticketsummarybar">
                    <li class="col0"><a href="#" class="toggleLink">E</a></li>
                       //...
           </ul>
      </div> <!-- simpleticketview -->
<br class="clear" />
<div class="toggle"> <!-- hiddenticketview -->
     //...
</div>

这会在页面上重复数十次。

我的 jQuery 代码如下所示:

$(document).ready(function() {
   $('div.toggle').hide();
   $('.toggleLink').click(function() {
        $(this).next('div.toggle').slideToggle('fast');
   return false;
   });
});

当我点击 E 时，它不会滑动到下一个 div。事实上什么也没有发生。

我尝试过使用:$('div.toggle').slideToggle('慢');

这会导致所有 div 切换。但我需要它来定位下一个 div。

提前致谢。

Answer 1

您需要为您的“切换”div 指定一个唯一的 ID，并将其与您的链接 ID 相匹配。然后定位这些 id:

<div class="eachticketwrapper">     
    <div class="simpleticketview">           
        <ul class="displayinline ticketsummarybar">
                <li class="col0"><a href="#" id="link-1234" class="toggleLink">E</a></li>
                   //...           </ul>
  </div> <!-- simpleticketview -->
  <br class="clear" />
  <div id="ticket-1234" class="toggle"> <!-- hiddenticketview -->     
   //...
  </div>

jQuery:

$(document).ready(function() { 
    $('div.toggle').hide(); 
    $('.toggleLink').click(function() { 
        var id = $(this).attr("id").split("-");
        $("#ticket-" + id[1]).slideToggle('fast'); return false; 
    }); 
});