同一页面上的多个 Jquery 滑动面板

Posted 2023-04-13

【中文标题】同一页面上的多个 Jquery 滑动面板

【英文标题】：Multiple Jquery sliding panels on same page

【发布时间】：2010-12-20 00:40:22

【问题描述】：

我们有一个 asp.NET 页面，它以编程方式将数据作为新列表项添加到无序列表中..

我想使用一些 jquery 来显示每个列表项的额外细节的滑动面板，但我使用的代码仅显示系列中的第一个（我猜是因为它们被称为相同的东西）。 . 如何添加一些条件来选择正确的？

代码如下：

$(文档).ready(函数() $(".btn-slide").click(function() $(this).slideToggle("slow"); $(this).toggleClass("active");返回假； ); ); ＃控制板 背景：#754c24； 高度：200px； 显示：无； 。滑动 边距：0； 填充：0； 边框顶部：实心 4px #422410; 背景：#000 无重复中心顶部； .btn 幻灯片 背景：url(images/white-arrow.gif) 不重复右-50px； 文本对齐：居中； 宽度：144px； 高度：31px； 填充：10px 10px 0 0； 边距：0 自动； 显示：块； 字体：粗体 120%/100% Arial、Helvetica、sans-serif； 颜色：#fff; 文字装饰：无； 。积极的 背景位置：右12px；

    <% foreach( var registration in ViewModel )  %>
            <li>
             Event: <%= registration.Event.Name %>
             Date: <%= registration.Event.Date.ToLongDateString() %>
             <div id="panel">
              <% if ( registration.HasResult )   %>
                 Your result for this event:
                 Place: <%= registration.Result.Place %>
                 Time: <%= registration.Result.Time %>
                 Average Pace: <%= registration.Result.AveragePace %>
              <%  else  %>
                 No results have been posted for this event.

              <%  %>
              </div>                  
              <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p> 
            </li>            
    <%  %>
</ul>

【参考方案1】：

将 div 更改为使用面板类而不是 id。

 <div class="panel">

然后像这样切换幻灯片：

 $('.panel', $(this).parent().parent()).slideToggle("slow");

这将获得存在于锚的父级中的具有类面板的 div。

【讨论】：

没用.. 再次添加后面板不滑动

哎呀，我错了 - 这很有魅力（我没说对）谢谢！

我不确定我是否应该编辑一个已经回答的问题..但我将面板类的高度更改为 100%，它非常适合，但打开时它会下降到首先页面的高度（更长）然后回来并适合幻灯片的内容....有没有办法阻止它？

【参考方案2】：

你可以用 each 方法做到这一点...

$(document).ready(function()
    $(".btn-slide").each(
        function() $(this).click(function()
         $(this).slideToggle("slow");
         $(this).toggleClass("active"); return false;
        );
    );
);

【讨论】：

不适合我，添加后点击链接没有任何作用

【参考方案3】：

html 元素的 ID 必须是唯一的，这样您的循环就会产生无效的 HTML。尝试为您的 DIV 分配一个类而不是一个 ID。

.panel 
    background: #754c24;
    height: 200px;
    display: none;


<% foreach( var registration in ViewModel )  %>

    <li>
     Event: <%= registration.Event.Name %>
     Date: <%= registration.Event.Date.ToLongDateString() %>
     <div class="panel">
      <% if ( registration.HasResult )   %>
         Your result for this event:
         Place: <%= registration.Result.Place %>
         Time: <%= registration.Result.Time %>
         Average Pace: <%= registration.Result.AveragePace %>
      <%  else  %>
         No results have been posted for this event.
      <%  %>
      </div>
      <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
     </li>
<%  %>

更新：您的 javascript 看起来也不正确：

$(document).ready(function()

    $(".btn-slide").click(function()
        $(this).closest('li').find('.panel').slideToggle("slow");
        $(this).toggleClass("active");
         return false;
    );

);

【讨论】：

由于某种原因，这样做将 div 内部的信息移到了外部，并且折叠仅适用于幻灯片链接，而不是实际的面板

您还需要更改 CSS，以便面板的 CSS 选择器使用该类。另外，我认为您的 javascript 需要滑动切换上一个 DIV，而不是按钮。

...请注意，您可能还需要在 CSS 更新时清除缓存。

抱歉——我错过了段落内的链接。会更新。

另外——我不确定活动类是否应该应用于面板或按钮。您可能还需要对此进行调整。