Question

我有一个票务管理程序，我正在尝试使用jQuery添加'accordian'样式功能。这个程序是用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切换。但是我需要它来定位NEXT div。

提前致谢。

Answer 1

你需要给你的'toggle' 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; 
    }); 
});

Answer 2

你可以获得没有id的div，但它会有点复杂：

$(this).parents().find("div.eachticketwrapper").nextAll().find("div.toggle:first")

这取决于文档的结构。如果每个贴片元素都有多个，则可能需要对其进行调整。最好使用id。

这个jQuery slideToggle函数有什么问题？

2 个答案: