Question

问候，基于我正在使用的jquery ui手风琴，我为手风琴列表项添加了一个幻灯片切换。所以会发生什么呢？我点击一个li，一个div在下面向下滑动以显示更多内容。

我遇到的问题是我发现自己必须创建多个id来引用slidetoggle。

div id css的例子：#panel，＃panel2，＃panel3，＃panel4等....

有没有办法可以使用幻灯片切换而无需添加其他数字以便它会滑动？我有50个列表项目我正在使用：

以下是js的样本（你可以看到我要去的地方）：

 $(".btn-slide").click(function(){
   $("#panel").slideToggle("slow");
   $(this).toggleClass("active"); return false;
 });
 $(".btn-slide2").click(function(){
   $("#panel2").slideToggle("slow");
   $(this).toggleClass("active"); return false;
 });

示例html：

  <li><div class="slide"><a href="#" class="btn-slide">One</a></div><div id="panel"></div></li>

  <li><div class="slide"><a href="#" class="btn-slide2">Two</a></div><div id="panel2"></div></li>

Answer 1

这应该可行，一切都在一个绑定中：

 $(".slide a").click(function(){
   $(this).toggleClass("active").parent().siblings().slideToggle("slow");
   return false;
 });

如果你可以稍微更改一下html（甚至没有编号！），请说：

<li><div class="slide"><a href="#">One</a></div><div class="panel"></div></li>

你可以更精确：

 $(".slide a").click(function(){
  $(this).toggleClass("active").closest("li").find(".panel").slideToggle("slow");
  return false;
 });

jquery slide toggle divs，无需创建多个类，函数等... ui手风琴

1 个答案: